Javascript 获取React render中映射返回的数组大小

我在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>

行数={this.numRows}

{this.state.members.map（（member）=>{
如果（成员显示）{
这个.numRows++；
返回{member.name}

}
})}

---

但这仍然是零。此处的完整代码：。如何显示返回的行数？

我认为最好将其提取到组件中：

类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
成员:[
..
],
visibleMembers（）{
返回this.members.filter（m=>m.display）
}
}
}
render（）{
const members=this.state.visibleMembers（）
返回(
行数={members.length}

{members.map（m=>
{m.name}
）}
)
}
}

---

我已经添加了<代码>键<代码>属性来抑制警告，您可以在上面读取更多信息。

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

render（）{
const membersToRender=this.state.members.filter（member=>member.display）
const numRows=membersToRender.length
返回(
行数={numRows}

{
membersToRender.map（（成员，索引）=>{
返回
{member.name}
})
}
);
}

---

编辑：感谢Edgar Henriquez，我按照您的建议修复了key properties警告

您可以使用filter生成一个新数组，然后使用它显示行数并遍历它。像这样：

const members = this.state.members.filter(member => member.display)
return (
  <div>
    <p>Number of rows = { members.length }</p>
    {members.map(member => <p>{ member.name }</p>)}
  </div>
)

constmembers=this.state.members.filter（member=>member.display）
返回(
行数={members.length}

{members.map（member=>{member.name}
）}
)

只需使用以下命令：

{this.state.members.length}

---

只需在特定条件下对this.state.members使用过滤器，该条件在您的案例中是“显示”属性

只需在元素周围环绕一个div，并获得实际渲染的元素计数，或者在应用过滤器（具有特定条件）后，可以使用use the length方法

实现如下渲染：

render(){
    return (
    <div>
       <p>Number of rows = {this.numRows}</p>
       <div id="members-with-display">
         {(this.state.members.filter((value)=>{return value.display})).map((member) => {
             return <p>{ member.name }</p>  
         })}
    </div>
    </div>
    );
}

---

您的

members

状态中是否有不会呈现的成员？在构造函数中，使用

this.state={numRows:0}

初始化状态，然后在if语句中的映射内部执行：

this.setState（{numRows:this.state.numRows+1}）

然后呈现

行数={this.state.numRows}

{this.state.members.length}

render(){
    return (
    <div>
       <p>Number of rows = {this.numRows}</p>
       <div id="members-with-display">
         {(this.state.members.filter((value)=>{return value.display})).map((member) => {
             return <p>{ member.name }</p>  
         })}
    </div>
    </div>
    );
}

getRenderedRows(){
//Either you can use this
return document.getElementById("members-with-display").childElementCount;
 // Or this
return this.state.members.filter((value)=>{return value.display}).length;
}