在地圖循環中計數jsx

{items.filter(item => item.status === 'active').map(item => 
    let total_male = item.length + 1; 
    <p>Male ({total_male})</p> 
    {this.renderData(item)} 
    </div> 
)}

是否高於jsx有效？它對我有意義，但它有錯誤。我有這樣的JSON在地圖循環中計數jsx

[{"name":"james","satus":"active"},{"name":"alice","satus":"deactived"}]

我想計算狀態活動的obj長度。

來源

2017-03-02 Mellisa

您提供的JSX是無效的，因爲：

有</div>但沒有打開標籤<div>
箭頭功能有有語法錯誤
箭頭函數沒有返回語句
item對象沒有length屬性（來自您提供的JSON數據）。也許你打算使用items.length來代替？

修復：

{items.filter(item => item.status === 'active').map(item => { 
    let total_male = items.length + 1; 
    return (
     <div> 
      <p>Male ({total_male})</p> 
      {this.renderData(item)} 
     </div> 
    ); 
})}

來源

2017-03-02 09:34:00 TrungDQ

我有問題，item.length是不確定的，我才意識到它是一個對象，而不是數組。 – Mellisa

我不確定你想要顯示什麼。 – TrungDQ

嘗試

{items.filter(item => item.status === 'active').map(item =>{ 
    let total_male = item.length + 1; 
    return (
     <div> 
      <p>Male ({total_male})</p> 
      {this.renderData(item)} 
     </div> 
     )} 
)}

你忘了返回和關閉股利。

來源

2017-03-02 09:34:12 Andrew

我有問題，item.length是未定義的，我只是意識到它是一個對象，而不是數組。 – Mellisa

如果你需要obj，你可以使用'Object.keys'或'Object.values'並使用它們的長度。 – Andrew

只需將'item.length'改爲'Object.keys（item）.length'。 – Andrew

寫這樣的：

var a = [ 
 
      {"name":"james","status":"active"}, 
 
      {"name":"alice","status":"deactived"} 
 
]; 
 

 
class App extends React.Component { 
 

 
    _createList() { 
 
     let count=0, active; 
 
     active = a.filter(item => item.status === 'active'); 
 
     count = active.length; 
 
     return active.map(item => <div> 
 
       <p>Male Count: {count}</p> 
 
       {this.renderData(item)} 
 
      </div> 
 
     ) 
 
     } 
 
     
 
     renderData(item){ 
 
      return <div>{item.name}</div> 
 
     } 
 

 
    render() { 
 
     return (
 
      <div> 
 
       {this._createList()} 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 

 
ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id='container'/>

來源

2017-03-02 09:37:33

在地圖循環中計數jsx

回答

相關問題