React/Redux最佳实践将多个阵列传递到同一组件

Question

我从第三方API获取了一些数据。我必须在我们收到的值之一（价格）中进行一些操作。修改已在动作创建者中成功完成，并存储在一个名为Price的新数组中，并通过道具通过。

在产品阵列上使用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/aaf6e325cf7fc5fc5fc5fd5ebc70192a192a1fa170

如果产品列表和价格阵列的长度相同，则可以使用索引从Pricelist Array获取当前产品的匹配价格并将其传递为Prop。

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>