列表中的每个孩子都应该有一个唯一的“key”道具。即使在分配密钥之后（Next JS）答案

【问题标题】：Each child in a list should have a unique "key" prop. Even after assigning the key (Next JS)列表中的每个孩子都应该有一个唯一的“key”道具。即使在分配密钥之后（Next JS）
【发布时间】：2022-11-03 18:12:43
【问题描述】：

我正在使用 Next JS。我创建了一个侧边栏并在其中添加了自定义手风琴（我将手风琴组件命名为 SideAccord.js）。我正在通过数组循环数据。我已经分配了密钥，但我仍然收到此错误：

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

Check the render method of SideAccord. See https://reactjs.org/link/warning-keys for more information.
at SideAccord (webpack-internal:///./components/SideAccord/index.js:25:19)
at ul
at div
at div
at nav
at div
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19750)
at Sidebar (webpack-internal:///./components/Sidebar/index.js:28:66)
at div
at Home
at MyApp (webpack-internal:///./pages/_app.js:18:24)

你可以在这里查看文件 - - https://codesandbox.io/s/festive-turing-59uo4v?file=/src/Sidebar.js

我有 3 个组件文件

Sidebar.js
SideAccord.js
SidebarData.js (which has all the data in the form of objects & arrays).

这是错误的屏幕截图 - screenshot of the error

【问题讨论】：

标签： javascript reactjs next.js jsx styled-components

【解决方案1】：

问题出在这里，尝试将<></> 替换为 <React.Fragment key={i.id}> 您已将键设置为子元素，父元素是<> 您应该将键分配给片段。

【讨论】：

【解决方案2】：

我打开沙箱，代码没有运行。无论如何，我看到了你的代码，这是我的礼物

从 map 方法返回的最外层元素应该有键。您正在使用 <></> 但它没有密钥。试试 <React.Fragment key={i.id}...</React.Fragment>
您在两个不同的数组上使用了相同的 id 1、2、3...，所以如果您在两个地方使用这些 id，那么它不是唯一的，请使用 UUID 或类似的

【讨论】：

【解决方案3】：

TLDR：将item.subNav.map 中的<> 包装器SideAccord 更新为：

<React.Fragment key={i.id}>

SideAccord.js 中的相关代码：

item.subNav.map((i, index) => {
  return (
    <>
      <DevNavAccordianSectionItem key={i.id}>
        ...
      </DevNavAccordianSectionItem>
    </>
  );
});

key 需要在父组件 (<>) 上设置，而目前您将它设置在第一个子组件 (DevNavAccordianSectionItem) 上。

<> 是 React.Fragment 的简写，仅在以扩展形式使用时支持 key 属性（<React.Fragment /> 或 <Fragment />，如果您导入 { Fragment } from react）。

顺便说一句，您可能不需要在DevNavAccordianSectionItem 上设置key。

【讨论】：

【解决方案4】：

您正面临此错误，因为您的 key 属性的值不是唯一的。您对多个项目使用相同的键值。因此，您需要为每个元素使用唯一值。

而不是使用item.id利用index作为价值。

{SidebarData.map((item, index) => {
    return <SideAccord key={index} item={item} />;
})}

【讨论】：