当前位置: 首页 > 知识库问答 >
问题:

React.js:每个子组件中的键值应该是唯一的?

慕容成文
2023-03-14

我使用React来呈现数据列表,但是数据中的每一项都没有被分配id或uuid或类似于标识属性的东西。我可以使用项目索引作为关键吗?喜欢:

data.map((item, index) => {
    <Item key={index}></Item>
})

我所关心的是,如果页面上的其他列表也使用order索引作为子组件键,这有关系吗?钥匙应该是唯一的标识吗?

共有2个答案

太叔永新
2023-03-14

若不打算在列表中移动元素,则可以执行此操作。每次移动元素时,它们都有不同的索引,因此react无法跟踪移动了哪些元素以及哪些元素刚刚更改了它们的数据。

索引必须是唯一的,无论它们的列表如何,它们都可以与其他列表交叉。

吕皓
2023-03-14

该键只需要是该列表的唯一键。

我最初也有这种担心。

从官方文档:

请记住,密钥只需在其同级中唯一,而不是全局唯一。

密钥应该是稳定的、可预测的和唯一的。不稳定的键(如Math.random()生成的键)将导致不必要地重新创建许多节点,这可能会导致性能下降和子组件中的状态丢失。

在此处阅读更多信息:对账-密钥

 类似资料:
  • 问题内容: 我正在构建一个接受JSON数据源并创建可排序表的React组件。 每个动态数据行都有一个分配给它的唯一键,但是我仍然遇到以下错误: 数组中的每个子代都应具有唯一的“键”道具。 检查TableComponent的渲染方法。 我的渲染方法返回: 该组件是单行,并且还为其分配了唯一的键。 每个输入都是通过具有唯一键的组件构建的: 而看起来像这样: 是什么导致独特的按键道具错误? 问题答案:

  • 我正在构建一个React组件,它接受一个JSON数据源并创建一个可排序表。 每个动态数据行都有一个唯一的键分配给它,但我仍然得到一个错误: 数组中的每个子项都应该有一个唯一的“键”道具。 检查TableComponent的render方法。 我的呈现方法返回: 组件是单行,并且还为其分配了唯一的键。 中的每个都是由具有唯一键的组件生成的: 而如下所示: 是什么原因导致了唯一键道具错误?

  • 我对React JS组件中的关键道具有问题。 我正在得到 警告:数组或迭代器中的每个子级都应具有唯一的“键”属性。检查登录的呈现方法。从应用程序中传递了一个孩子。 控制台日志中的警告。应用程序组件如下: 我的登录组件如下: 我对React还是个新手,我不确定我应该像钥匙一样传递什么,在哪里传递? 使现代化 LoginForm组件: 路由文件: 主页组件

  • 我有一个问题,“列表中的每个孩子都应该在我的应用程序中有一个唯一的“键”道具”错误。我可以打印表格,但我不知道为什么它给我这个错误,因为我提供了一个唯一的ID列表中的每个项目。 我也尝试过向我的表头添加一个键属性,但这并不能修复错误。 如有任何意见,将不胜感激 客户组件 表组件

  • 在这个简单的React应用程序中,我不明白为什么我会收到以下警告信息: 警告:列表中的每个孩子都应该有一个唯一的“键”道具。 对我来说,似乎我把密钥放在了正确的位置,形式为key={item.login.uuid} 我怎样才能摆脱警告信息?把钥匙放在哪里合适? 应用程序。js 列表js

  • 所以我想渲染数组,但它一直在说,警告:列表中的每个孩子都应该有一个唯一的“键”道具,即使它有唯一的键,我的数组包含三个元素,它甚至没有正确渲染第三个数组,按钮没有甚至因为某种原因第三李的工作。 更新:我从firebase获得的数据如下所示: 此代码将选择每个数据的标题 当我将鼠标悬停在“fikka-fikka”上时,“fikka-fikka”的按钮甚至不起作用。在ed sheeran和一个方向上,