マップの反復を介して複数のUIコンポーネントをレンダリングする

Question

だから私は見渡したが、これについての解決策は実際には見つかりませんでした。私は.map()機能を介して、ネットワーク要求によって検索されたデータセットからの反応で複数のUI要素をレンダリングしたい。私は、単純な文字列でデータ値を取り込めるようになっていますが、UIを別の関数から呼び出すことでそれを行うことはできません。ここで私が持っているものです。

readMode: function(item) { 
    return (
      <div> 
       <div className="itemNo">item.itemNo</div> 
       <div className="itemRef">item.itemRef</div> 
       <div className="itemColor">item.itemColor</div>      
      </div> 
    ) 
}, 

render: function() { 
    return (
     <div> 
      {this.state.inventory.map(function(item){ 
       return this.readMode(item); 
      })} 
     </div> 
    )  
} 

ReactDOM.render(
    <Inventory />, 
    document.getElementById("container") 
); 

私は、本当に近づいすべてのエラーをバイパスしますが、私が最後にこの1が残ってると思う：あなたはプレーンを使用しているのでTypeError: Cannot read property 'readMode' of undefined at eval

Answer 1

JavaScriptの関数mapの引数には、その関数の新しいコンテキストを作成しています。このため、thisの値はクラスを参照するのではなく、その関数のコンテキストを参照します。二つの解決策は以下のとおりです。

1）既存のmap機能にthisをバインド：、(function(item){ //logic}).bind(this)

2）あなたはES6を使用することができると仮定すると、より良い代替手段を矢印関数を使用します。あなたが自動的に問題を解決するように、矢印機能は、親からのコンテキストを継承します。ZekeDroidの答え@、あなたがこのような、より簡単な方法でそれを書くことができると

this.state.inventory.map(item => this.readMode(item)) 

Answer 2

追加：

readMode: function() { 
    return this.state.inventory.map((item, i)=>{ 
     return (
      <div key={i}> 
       <div className="itemNo">{item.itemNo}</div> 
       <div className="itemRef">{item.itemRef}</div> 
       <div className="itemColor">{item.itemColor}</div>      
      </div> 
     ) 
    }) 

}, 

render: function() { 
    return (
     <div>    
      {this.readMode()}   
     </div> 
    )  
} 

ReactDOM.render(
    <Inventory />, 
    document.getElementById("container") 
); 

Answer 3

私は考えていませんあなたは何かを縛る必要がある。あなたは「この」必要がないので、あなたはただ、部品の外にあなたの関数を宣言することができます。

const readMore = (item) => { return <div>{item.name}</div>; } 

は、あなただけ使用することができます。

this.state.inventory.map(() => {return readMore(item); });