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

Question

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

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。 检查Accordion的渲染方法

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

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

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

Answer 1

在线 23

进行以下更改

<p 

至

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

问题很简单。 React 需要唯一地标识每个兄弟节点，因此它要求您在返回数组或迭代丢失以返回组件/视图时将 key prop 传递给兄弟节点。

Answer 2

在填充子项时，不建议使用 counter (0, 1, 2...)作为您的键。
您应该使用uuid()或 item 的self-identifier 。