Можем ли мы использовать ключ для обновления компонента, связанного с другим компонентом с тем же ключом

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 с помощью обратных вызовов без изменения состояния.