React - 为什么我的 div 没有显示在我的 for 循环函数的页面上

Question

我正在写一个 UI 页面来显示新消息列表，但是我的代码在某处出错了，没有呈现我的所有页面。我好像找不到地方。

我的数组正确地捕获了数据，因为我已经在 console.log.

中对此进行了测试

本应从“displayNewMessage”呈现在页面上的文本不起作用。其他一切呈现。

谁能看出我哪里出错了？

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      messageData: [],
      newMessages: [],
      isLoading: false
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });
    this.setState({ userID: this.props.location.state });
    const serachByUserId = this.props.location.state;
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    const url =
      "my-url" +
      serachByColleagueId;
    fetch(proxyurl + url)
      .then((res) => res.json())
      .then((data) => this.setState({ data: data }))
      .then(
        fetch(
          proxyurl +
            "my-URL"
        )
          .then((res) => res.json())
          .then((messageData) =>
            this.setState(
              { messageData: messageData, isLoading: false },
              () => {}
            )
          )
      );
  }

  render() {
    const { data, isLoading, messageData } = this.state;
    if (isLoading) {
      return (
        <div className="pageLoading">
          <p>Loading...</p>
        </div>
      );
    }

    return (
      <div>
        <div>
          <p>
            <strong>
              Welcome {data.Forename} {data.Surname}
            </strong>
          </p>
         </div>
        <div className="InfoBox">
          <p>
            <strong>Message Backlog</strong>
          </p>
          <p className="helpText">
            The below Orders have open chats awaiting a response. Click on
            the order number to send and view messages.
          </p>
        </div>
        {this.getMessages(messageData)}
      </div>
    );
  }

  getMessages(messageData) {
    var newMessagesArray = [];
    var latestMessageIndex;
    var latestMessage;

    messageData.message_Subjects.forEach(saveNewMessage);

    function saveNewMessage(sub) {
      console.log(sub);
      latestMessageIndex = sub.message_Chain.length - 1;
      latestMessage = sub.message_Chain[latestMessageIndex];
      if (latestMessage.sentFromId.toString().length === 7) {
        var message_Chain = {
          dateTime: latestMessage.dateTime,
          sentFromId: latestMessage.sentFromId,
          messagebody: latestMessage.messageBody,
          messageChainId: latestMessage.messageChainId,
        };
        var message_subject = {
          userId: sub.userId,
          subjectId: sub.messageSubjectId,
          subject: sub.subject,
          message_Chain: message_Chain,
        };
        newMessagesArray.push({ message_Subject: message_subject });
      } else {
        // do nothing
      }
    }

    if (newMessagesArray.length > 0) {
      return ( <div>{newMessagesArray.forEach(displayNewMessage)}</div>)
    } else {
      return <p>No New messages.</p>;
    }

    function displayNewMessage(arrayItem) {
      console.log(arrayItem);
      return (
        <div>
          <ul>
            <li>Subject = {arrayItem.message_Subject.subject}</li>
            <li>Order number = {arrayItem.message_Subject.orderNumber}</li>
            <li>Date and Time = {arrayItem.message_Subject.dateTime}</li>
            <li>
              message = {arrayItem.message_Subject.message_Chain.messageBody}
            </li>
            <li>
              sent by = {arrayItem.message_Subject.message_Chain.sentFromId}
            </li>
          </ul>
        </div>
      );
    }
  }
}

export default Welcome;

Answer 1

发现不需要 displayNewMessage 函数就无法在页面上呈现。

if (newMessagesArray.length > 0) {
      return (
      newMessagesArray = newMessagesArray.map((item) =>
        <li key={item.id}>Subject = {item.message_Subject.subject}</li>
        <li> etc..... </li>
        ))
    } else {
      return <p>No New messages.</p>;
    };

React - 为什么我的 div 没有显示在我的 for 循环函数的页面上

React - why is my div not displayed on the page from my for loop function

components

render

function

reactjs

react-component