获取 React 渲染中 map 返回的数组大小答案

【问题标题】：Get size of array returned by map in React render获取 React 渲染中 map 返回的数组大小
【发布时间】：2018-02-08 16:56:56
【问题描述】：

我在 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/。如何显示返回的行数？

【问题讨论】：

您有不会在members 状态下呈现的成员吗？
在您的构造函数中，使用 this.state={ numRows: 0} 初始化一个状态，然后在 if 语句中的 map 中执行：this.setState({numRows: this.state.numRows+1}) 然后渲染 <p>Number of rows = {this.state.numRows}</p>

标签： javascript arrays reactjs

【解决方案1】：

我认为将其提取到组件中是个好主意：

JSFiddle Example

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      members: [
        ..
      ],

      visibleMembers() {
        return this.members.filter(m => m.display)
      }
    }
  }

  render() {
    const members =  this.state.visibleMembers()

    return (
      <div>
        <p>Number of rows = {members.length}</p>
        {members.map(m => <p key={ m.id }>{ m.name }</p>)}
      </div>
    )
  }
}

我添加了key 属性来抑制警告，您可以在React Documentation 上阅读更多信息。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

只需使用这个：

{this.state.members.length}

【讨论】：

【解决方案5】：

只需在 this.state.members 上使用过滤器在您的情况下是显示属性的特定条件

只需在元素周围包裹一个 div 并获取实际渲染的元素计数，或者您可以在应用具有特定条件的过滤器后使用长度方法。

像这样实现渲染：

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;
}

【讨论】：