React - 列表中的每个 child 都应该有一个唯一的“key”道具

Question

我正在开发一个 React Web 应用程序，我在其中从 API 获取和显示学生数据，但我一直收到错误，

警告：列表中的每个 child 都应该有一个唯一的“键”道具。检查 Accordion

的渲染方法

Accordion.js 作为我的 Web 应用程序的组件之一

任何解决此问题的帮助将不胜感激:)

我尝试将带有 id 的关键道具从 parent 组件传递给 Accordion 组件，但这似乎不起作用。难道我的考试成绩段需要传一个key？

Answer 1

第 23 行

进行以下更改

<p

到

<p key={`${i}-stats`}

问题很简单。 React 需要唯一地标识每个兄弟节点，因此当 returning 数组或迭代丢失到 return component/view.

时，它会要求您将 key prop 传递给兄弟节点

Answer 2

不推荐使用计数器 (0, 1, 2...) 作为您的密钥填充子项时。
您应该使用 uuid() 或项目的 self-identifier.

React - Each child in a list should have a unique “key” prop