reactjs - 我们可以使用 key 来更新链接到具有相同 key 的另一个组件的组件吗

Question

我正在创建一个带有不同产品卡的网站，并在主页中显示顶级产品和两个不同组件（AllProduct.js 和 TopProduct.js）中可用的所有产品。

我通过映射检索到的每个项目并将productID 添加为键来创建我的顶级产品卡，如下所示：

{props.deals.map(deal => (
  <Grid key={deal._id} item container xs={12} sm={6} md={3} lg={3} xl={3}>
    <DealCard deal={deal} toggleLike={toggleLike}/>
  </Grid>
))}

我对所有产品都做了同样的事情：

{props.deals.map(deal => (
  <Grid key={deal._id} item container xs={12} sm={6} md={3} lg={3} xl={3}>
    <DealCard deal={deal} />
  </Grid>
))}

我看到，如果我的顶级产品在我的所有产品列表中，则组件是链接的（当我更改文本的颜色时，它会在组件上以相同的键更改但没有编程方式）。

所以我的问题是：如何通过更改状态来更改以编程方式链接的组件的值？

Answer 1

您需要将键值从

key={deal._id} 

至

key={`${deal._id}_${deal.appreciations}`}

因此，当您的父状态发生更改时，由于键已更改，它也会触发其他组件。我希望您已经在父组件中列出了状态，并且您正在deals使用回调更新数组而不改变状态。