javascript - 在 Reactjs 中，在执行嵌套循环时不会呈现任何内容

Question

我有一个 Prop ，其中包括用户数组和消息数组。每个用户和消息都通过相应的 ID 关联。

我想匹配这些 ID，以便我可以将消息呈现给发布消息的用户。

问题是屏幕上没有呈现任何内容，但在 console.log() 中，我可以看到结果。拜托，有人可以阐明这一点。

另外，我不确定我这样做是否正确，所以如果你能告诉我更好的方法，我会很高兴。

谢谢

react :

import React, { Component } from 'react';

class Messages extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let self = this;

    return (
      <ul>
      {
        this.props.messages.map((message, msg_key) => {
          self.props.members.forEach((member) => {
            if (member.id === message.userId) {
              console.log('inside foreach message.userId', message.userId); // this shows in console.
              console.log('inside foreach member.id', member.id); // this shows in console.
              return <p>member.id</p> // nothing shows on screen.
            }
          })
        })
      }
      </ul>
    );
  }
}

export default Messages;

Answer 1

forEach 没有副作用。使用 map

return (
  <ul>
  {
    this.props.messages.map((message, msg_key) => {
      return self.props.members.map((member) => { // <-- this line
        if (member.id === message.userId) {
          console.log('inside foreach message.userId', message.userId); // this shows in console.
          console.log('inside foreach member.id', member.id); // this shows in console.
          return <p>member.id</p> // nothing shows on screen.
        }
      })
    })
  }
  </ul>
)

我所说的“副作用”是指它既不返回任何内容也不修改原始数组 - map 返回修改后的数组。

记得在返回数组时提供一个 key 属性。

编辑

啊，实际上 ^ 并没有做你想做的事。

Array 有一个很好的方法来完成你正在尝试的事情，find

return (
  <ul>
  {
    this.props.messages.map((message, msg_key) => {
      const member = self.props.members.find((member) => member.id === message.userId)
      return <p>{member.id}</p>
    })
  }
  </ul>
)

编辑 #2

好吧......它实际上确实有效，但它并不漂亮。 React 不会在数组中呈现 null，因此它会跳过条件不正确的那些...