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

Posted 2023-02-22

【中文标题】获取 React 渲染中 map 返回的数组大小

【英文标题】：Get size of array returned by map in React render

【发布时间】：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>

【参考方案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;