獲取地圖在React渲染中返回的數組大小

我在使用方法的React組件中使用了array.map。它的工作原理，但我想知道它渲染了多少行。我想通過我的構造函數初始化this.numRows = 0，然後在map回調遞增它：獲取地圖在React渲染中返回的數組大小

<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/。我怎樣才能顯示返回的行數？

來源

2017-08-30 GluePear

您是否有會員不會在您的「會員」狀態中呈現？ –

在你的構造函數中，用'this.state = {numRows：0}'初始化一個狀態，然後在if語句內執行：this.setState（{numRows：this.state.numRows + 1}）'

行數= {this.state.numRows}

' – finch

你可能會考慮篩選你想先來顯示，然後顯示結果數組的長度成員，並對其映射渲染成員：

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

編輯：感謝埃德加Henriquez，我按照你的建議修復了關鍵屬性警告

來源

2017-08-30 21:03:35

我認爲這是一個好主意，將其解壓縮到組件：

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。

來源

2017-08-30 21:01:34

你可以使用過濾器來生成一個新的數組，然後用它來顯示行數並遍歷它。像這樣：

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

來源

2017-08-30 21:04:45

獲取地圖在React渲染中返回的數組大小

回答

相關問題