控制台错误：index.js:1 警告：列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：Console error: index.js:1 Warning: Each child in a list should have a unique "key" prop控制台错误：index.js:1 警告：列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-10-03 19:21:45
【问题描述】：

我的 React 代码有问题。

这是我的代码：

const App = () => {
  const sectionData = [
    {
      id: 1,
      rev: true,
      path: "/about",
      title: "about us",
      bgColor: "#D6D6D6",
      imgURL:
        "https://images.pexels.com/photos/1170412/pexels-photo-1170412.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
      heading: "The Scroll Project",
      definition: `Lorem ipsum dolor sit amet consectetur, adipisicing elit.Ipsa accusamus excepturi deleniti reiciendis, modi voluptatibus quam facere voluptatem iste, minima expedita sint soluta ?
      
      Deserunt recusandae tempore veritatis consectetur perferendis inventore quibusdam, suscipit sed saepe laudantium distinctio impedit, temporibus praesentium fugiat.Placeat libero maxime nobis minus perspiciatis laborum eligendi magnam ea ?
      
      Deserunt recusandae tempore veritatis consectetur perferendis inventore quibusdam, suscipit sed saepe laudantium distinctio impedit, temporibus praesentium fugiat.Placeat libero maxime nobis minus perspiciatis laborum eligendi magnam ea ?`,
    },
    {
      id: 2,
      rev: false,
      path: "/services",
      title: "our services",
      bgColor: "#FACACA",
      imgURL:
        "https://images.pexels.com/photos/3935702/pexels-photo-3935702.jpeg?cs=srgb&dl=pexels-leah-kelley-3935702.jpg&fm=jpg",
      heading: "The. Best. Service. Ever.",
      definition: `Lorem ipsum dolor sit amet consectetur, adipisicing elit.Ipsa accusamus excepturi deleniti reiciendis, modi voluptatibus quam facere voluptatem iste, minima expedita sint soluta ?
      
      Deserunt recusandae tempore veritatis consectetur perferendis inventore quibusdam, suscipit sed saepe laudantium distinctio impedit, temporibus praesentium fugiat.Placeat libero maxime nobis minus perspiciatis laborum eligendi magnam ea ?
      
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Est molestias aperiam doloremque et sit, necessitatibus officia unde. Ex quod, illum facilis necessitatibus id inventore maxime, adipisci aut labore nihil eligendi ipsa! Assumenda enim nostrum blanditiis atque suscipit, exercitationem amet necessitatibus.`,
    },
    {
      id: 3,
      rev: true,
      path: "/tours",
      title: "our tours",
      bgColor: "#CAB3B3",
      imgURL:
        "https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?cs=srgb&dl=pexels-canva-studio-3153198.jpg&fm=jpg",
      heading: "Low Cost yet Satisfactory",
      definition: `Lorem ipsum dolor sit amet consectetur, adipisicing elit.Ipsa accusamus excepturi deleniti reiciendis, modi voluptatibus quam facere voluptatem iste, minima expedita sint soluta ?`,
    },
  ];
  return (
    <Router>
      <div className="app">
        <Navbar />
        <Switch>
          <Route exact path="/">
            <Main />
          </Route>

          <Switch>
            {sectionData.map((section) => {
              return (
                <Route path={section.path}>
                  <Section data={section} key={section.id} />
                </Route>
              );
            })}
          </Switch>
        </Switch>
      </div>
    </Router>
  );
};

如您所见，我在 map 函数中将键设置为 ={section.id}。它甚至显示在 React 开发工具上： enter image description here enter image description here

我正在为该部分使用样式化组件，所以我不确定它是否与错误有关。 React Router 是否导致了这个问题？

【问题讨论】：

这能回答你的问题吗？ Understanding unique keys for array children in React.js

标签： javascript reactjs key

【解决方案1】：

{sectionData.map((section, index) => {
              return (
                <Route key={index} path={section.path}>
                  <Section data={section} key={section.id} />
                </Route>
              );
            })}

每当创建 JSX 数组时，总是添加 key 属性。

【讨论】：

见why you shouldn't use the index as a key prop。所以这个答案是不正确的，或者我会说不推荐。
@decpk：感谢分享。我通过这个了解了一个特定的数组是否是动态的（添加新元素、删除或在运行中修改），那么不推荐这种方式，因为键值可以改变。但是对于静态数组来说，完全没问题。我意识到，这里用户正在创建主要是静态的路线。因此，我认为这种方法仍然值得推荐并且很好。但是由于这里的 id 已经在数组中可用，所以使用 id 也同样好。
抱歉，我没有仔细阅读 OP 和您的代码。你是完全正确的，是的，我们可以在这里使用id 作为key。 OP 只是将 key 放在错误的元素上。

【解决方案2】：

您需要在 Route JSX 标签上输入密钥。它是列表正在迭代的孩子。 Section 只是每个Route 组件中的一个子组件。

  <Switch>
            {sectionData.map((section) => {
              return (
                <Route path={section.path} key={section.id}>
                  <Section data={section} />
                </Route>
              );
            })}
          </Switch>

Why you shouldn't use index as key

【讨论】：