时间戳

首页 > 解决方案 > React 使用新项目更新列表，但 ID 可能会重复

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

问题描述

我有一个有状态的组件，它维护2 lists of different types. 例如，从cars. 每辆车都有一个make（并且可以说它具有独特的makeId）和model（再次具有独特的modelId）。现在我的组件首先显示一个品牌列表，每个品牌都有一个key值为 的属性makeId。现在单击 amake时，我的stateful组件会使用 selected 的所有models（每个都具有modelId作为 key属性）更新列表make。现在可能会发生一些与现在正在渲染的数值make相同的数值。（因为品牌和模型进入不同的关系表）。在这种情况下更新列表时会遇到一些问题吗？ makeIdmodelId

例子：

下面是新旧榜单的对比。

<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>

标签： javascriptreactjsreact-redux

解决方案

keyReact 用唯一的prop识别元素。在一个组件中，如果你认为元素列表会有重叠的 id，你总是可以传递一个唯一的keyprop。

如果您正在渲染的元素与制作相关，请将键作为

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

如果您正在渲染的元素与模型相关，请将键作为

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

推荐阅读