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

【问题标题】：React - Each child in a list should have a unique “key” propReact - 列表中的每个孩子都应该有一个唯一的“key”道具
【发布时间】：2021-06-15 23:17:41
【问题描述】：

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

警告：列表中的每个孩子都应该有一个唯一的“key”道具。查看Accordion的render方法

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

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

我尝试将带有 id 的 key prop 从父组件传递给 Accordion 组件，但这似乎不起作用。是不是我需要在我的考试分数段中通过一个键？

【问题讨论】：

【解决方案1】：

第 23 行

进行以下更改

<p

到

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

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

【讨论】：

【解决方案2】：

不建议在填充儿童时使用计数器(0, 1, 2...) 作为您的键。
您应该使用 uuid() 或项目的 self-identifier。

【讨论】：