在 Reactjs 中，当执行嵌套循环时，不会渲染任何内容

Question

我有一个包含用户数组和消息数组的道具。每个用户和消息都通过相应的 ID 相关联。

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

问题是屏幕上没有渲染任何东西，但在console.log()中，我可以看到结果。拜托，有人可以对此有所了解吗？

我也不确定我是否以正确的方式做到这一点，所以如果你能告诉我一个更好的方法，我会很高兴的。

谢谢

反应：

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，所以它会跳过条件不真实的那些......

Answer 2

你应该重新定义你的数据结构。您当前拥有的不会是高性能的。

而不是成员数组.. 你应该有一个由成员 ID 键的对象。这样您就可以通过成员的 ID 查找成员。每当有将用于其他数据字段的信息时，都应该有一个键值存储设置，该设置由映射到其他信息的唯一标识符进行键值存储设置。这是一个例子

members: {
    1: { id: 1, name: 'foo'},
    2: { id: 2, name: 'bar'}
}

定义这样的数据结构时，可以轻松查找消息的成员。

render (){
    const elems = [];
    this.props.messages.forEach((message, msg_key) => {
        const member = this.props.members[message.userId];
        if (member) {
            elems.push(
                <li key={msg_key}>
                    <p>{message.title}</p> /* or whatever you want from the message */
                    <p>{member.id}</p>
                </li>
            );
        }
    })
    return (
      <ul>
          {elems}
      </ul>
    )
}

Answer 3

我认为您可能会通过 1 次使用 2 个循环(map 和 forEach(来弄乱数组中的一些属性。

尝试使用帮助程序函数来映射(而不是 forEach(member.id 属性。所以只需在 render(( 中调用 {this.renderMemberList}

。

你有一个JSFiddle设置吗？它会更容易