gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 15:11:59 25 4
gpt4 key购买 nike

我有一个有状态组件,它维护2 个不同类型的列表。例如,考虑汽车。每辆车都有一个品牌(假设它有唯一的makeId)和model(同样有一个唯一的modelId ).现在我的组件首先显示品牌列表,每个品牌都有一个 key 属性,其值为 makeId。现在单击 make,我的 stateful 组件会更新包含所有 models 的列表(每个模型都有 modelId 作为key 属性)。现在可能会发生某些 makemakeId 的数值与正在呈现的 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>

最佳答案

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

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

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

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

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

关于javascript - React 使用新项目更新列表但 ID 可能会重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53577956/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com