javascript - React 使用新项目更新列表但 ID 可能会重复

Question

我有一个有状态组件，它维护2 个不同类型的列表。例如，考虑汽车。每辆车都有一个品牌(假设它有唯一的makeId)和model(同样有一个唯一的modelId ).现在我的组件首先显示品牌列表，每个品牌都有一个 key 属性，其值为 makeId。现在单击 make，我的 stateful 组件会更新包含所有 models 的列表(每个模型都有 modelId 作为key 属性)。现在可能会发生某些 make 的 makeId 的数值与正在呈现的 modelId 的数值相同的情况。(因为 makes 和 models进入不同的关系表)。在这种情况下更新列表时 react 会遇到一些问题吗？

示例:

Below is the comparison of old and new list.

<ul>
  <li key=1> Some Make X</li>
  <li key=2> Some Make Y</li>
</ul>


<ul>
  <li key=34> Some Model X</li>
  <li key=2> Some Model Y</li>
</ul>

Answer 1

React 使用唯一的 key 属性来识别元素。在组件中，如果您认为元素列表会有重叠的 ID，您始终可以传递唯一的 key 属性。

如果您正在渲染的元素与 make 相关，则传入键作为

<div key={`make_${makeId}`} />

如果您正在渲染的元素与模型相关，则传入键作为

<div key={`model_${modelId}`} />