マッピング中にネストされたデータテーブル

Question

[OK]を、私は反応初心者です。基本的に私は2つのテーブルproductsとcategoriesを持っています。 私はとproductsをマップするために管理：

var ProductsList = React.createClass({ 
render: function() { 
    var EachProduct = this.props.data.map(function (item) { 
     return (
       <SingleProduct key={item.Id } data={item}/> 
     ); 
    }); 
    return (
     <ul> 
      {EachProduct} 
     </ul> 
     ); 
} 

}）;

...第2テーブルcategoriesがまだあります。私はグーグルで試してみましたが、Googleにどうやってそれを本当に知らなかったのです。 通常はコントローラから見るために2つのモデルを送信するだけでforeachではforeachを実行でき、2番目のモデルではfk_product_idなどのようにcategoriesを調べると、<SingleProduct/>クラスはマップされた製品に接続されているすべてのカテゴリを表示できます。しかしこれはまったく別の話です。

私はその方法を知りません。誰かが私にそれを導くことができれば、私は感謝するでしょう。

Answer 1

はたぶん、このようなものは役立つだろう：

render: function() { 
var EachProduct = this.props.data.map(function (item) { 
    var category = this.props.categories.find((categoryItem)=>{ 
     return (item.categoryId === categoryItem.id) 
    }) 
    return (
      <SingleProduct key={item.Id } data={item} category={category}/> 
    ); 
}); 
return (
    <ul> 
     {EachProduct} 
    </ul> 
    ); 

}