时间戳

首页 > 解决方案 > React Error – 列表中的每个子项都应该只有在第一个渲染的组件上才有唯一的“key”道具

reactjs - React Error – 列表中的每个子项都应该只有在第一个渲染的组件上才有唯一的“key”道具

问题描述

所以我正在尝试清理我的项目中的一些错误，而这个似乎想要留下来。

Warning: Each child in a list should have a unique "key" prop.

但是，我只在呈现的第一个组件上收到此错误，并且我已经为它提供了一个密钥。这是有问题的代码部分。

bookings.list.map((request) => (
              <RequestListItem request={request} key={request.id}/>
            ))

对于如何解决这个问题，有任何的建议吗？我已经尝试过添加超时，但额外的时间并没有改变任何东西。

标签： reactjs

解决方案

当您遍历反应组件并生成列表时，它们每个都需要一个唯一的键。

bookings.list.map((request, index) => (
  <RequestListItem key={index} request={request}/>
))

你在做什么似乎很好，但不需要使用自定义名称或 id，只需接收第二个索引 arg 并使用它。id（但是，如果它确实存在并且是唯一的，那么您的代码应该可以工作。

推荐阅读