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>
)

我的意思是＆＃34;副作用＆＃34;是它既不返回任何东西也不修改原始数组 - 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

我认为你可能通过一次有2个循环（map和forEach）搞乱了数组中的一些属性。

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

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

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

3 个答案: