マップ内のjsxがループしています

Question

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

上記のjsxは有効ですか？それは私には意味をなさないが、それは誤りがある。私はアクティブな状態を持っているOBJ長をカウントするこの

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

のようなJSONを持っています。

Answer 1

ので、あなたが提供JSXが有効ではありません。そこ</div>があるが、何の開始タグ<div>

矢印機能は、構文エラー

に矢印機能を持っている何のreturn文

を持っていなかった

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

Answer 2

は

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

に試してみてくださいあなたが返し忘れてしまったとのdivを閉じました。

Answer 3

はこのようにそれを書く：私は問題を抱えている

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'/>