javascript - 获取 React 渲染中 map 返回的数组大小

Question

我在 React 组件的 render 方法中使用了 array.map。它有效，但我想知道它渲染了多少行。我正在尝试在我的构造函数中初始化 this.numRows = 0，然后在 map 回调中递增它:

<div>
        <p>Number of rows = {this.numRows}</p>
        {this.state.members.map((member) => {
          if (member.display) {
            this.numRows++;
            return <p>{ member.name }</p>  
          }
        })}
      </div>

但这仍然显示为零。完整代码在这里:jsfiddle.net/ra13jxak/ .如何显示返回的行数？

Answer 1

您可以考虑先过滤要显示的成员，然后显示结果数组的长度，并在其上映射以呈现成员:

Fiddle

render() {
    const membersToRender = this.state.members.filter(member => member.display)
    const numRows = membersToRender.length

    return (
      <div>
        <p>Number of rows = {numRows}</p>
        {
          membersToRender.map((member, index) => {
            return <p key={index}>{ member.name }</p>
          })
        }
      </div>
    );
  }

编辑:感谢 Edgar Henriquez，我按照您的建议修复了关键属性警告