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

【问题标题】：Can we use key to update an component linked to another component with the same key我们可以使用 key 来更新链接到具有相同 key 的另一个组件的组件吗
【发布时间】：2020-04-01 14:17:38
【问题描述】：

我正在创建一个带有不同产品卡片的网站，并在主页中显示热门产品和所有可用产品在两个不同组件（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>
))}

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

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

【问题讨论】：

您是先讲一个问题，然后再问如何实现相同的目标？你能再读一遍你的问题，最后两段吗？
我很难解释我的问题，我编辑了我的帖子
您想在其他部分（在所有产品中）反映什么变化？
我需要更改我的赞赏计数器，当用户在顶级产品部分或所有产品部分中欣赏产品时，我需要两个组件都更改他们的赞赏计数器

标签： reactjs key state update-statement

【解决方案1】：

您需要从

更改键值

key={deal._id}

到

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

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

【讨论】：