React/Redux複数の配列を同じコンポーネントに渡すときのベストプラクティス

Question

サードパーティのAPIからデータを取得しています。私は受け取った価値の一つ（価格）でいくつかの操作を行う必要があります。変更はアクションクリエイターで正常に実行され、priceという新しい配列に格納され、小道具として渡されます。

個々のProductコンポーネントは、製品の配列でmapメソッドを使用した後にレンダリングされます。

私の質問は、この製品コンポーネントに新しいアレイ（変更価格）を渡して、正しい製品に適用する方法です。

const CoinList = (props) => { 
return(
    <View> 
      { 
       props.productList.map(product => { 
        return <Product key={product.id} {...product}/> 
       }) 
      } 

    </View> 
) 
}; 

新しい価格が「価格」として追加されているため、私は自然に<Product price={props.price} key={product.index} {...product} />を試してみると、各製品の価格全体が表示されてしまいます。

この配列をオブジェクトの配列に変換して広げようとしましたが、それを<Product key={product.index} {...product} {...props.price}/>に広げてみましたが、どちらもうまくいかないようです。

このような状況にはどのようなアプローチが最適でしょうか？

Answer 1

私はこのロジックをセレクタで行い、それをメモするために再選択を使用します：https://github.com/reactjs/reselect。

すでに得られたデータを処理するためにかなりよく認めベストプラクティスであるセレクタを使用していない場合：https://gist.github.com/abhiaiyer91/aaf6e325cf7fc5fd5ebc70192a1fa170

Answer 2

productListと価格表の配列は、あなたが価格表の配列からマッチング価格を取得するためにインデックスを使用することができ、同じ長さを持っている場合現在の製品のためにそれを支柱として渡す。

class Product extends React.Component { 
 
    render() { 
 
    let {id, name, price} = this.props; 
 
    return <div className="Product">{name} | {price} $</div> 
 
    } 
 
} 
 

 
const CoinList = (props) => { 
 
return <div>{props.productList.map((product, i) => { 
 
    return <Product price={props.priceList[i]} key={product.id} {...product}/>}) 
 
}</div> 
 
}; 
 

 
const products = [{id: 1, name: 'A'}, {id: 2, name: 'B'}] 
 
const prices = [100, 200] 
 

 
ReactDOM.render(
 
    <CoinList productList={products} priceList={prices} />, 
 
    document.getElementById('app') 
 
)

<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="app"></div>