获取React渲染中地图返回的数组大小

Question

我正在使用array.map我render的React组件方法.它可以工作,但我想知道它渲染了多少行.我正在尝试初始化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

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

小提琴

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,我按照你的建议修复了关键属性警告