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

Question

我正在创建一个包含不同产品卡片的网站，我在主页上显示了顶级产品和所有可用产品两个差异组件（AllProduct.js & TopProduct.js）。

我创建了我的顶级产品卡片，方法是映射检索到的每个项目并添加产品 ID 作为键，如下所示：

{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>
))}

我看到如果我的顶级产品在我的所有产品列表中，组件是 linked（当我更改文本的颜色时，它会使用相同的键在组件上更改，但没有 programmaticaly）。

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

Answer 1

您需要更改键值

key={deal._id}

到

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

所以当你的父状态改变时，它也会触发另一个组件，因为键已经改变。我希望您已经在父组件中列出了状态，并且您正在使用回调更新 deals 数组而不改变状态。

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

Can we use key to update an component linked to another component with the same key

state

key

update-statement

reactjs