Console error: index.js:1 Warning: Each child in a list should have a unique "key" prop

Question

我的 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 hereenter image description here

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

Answer 1

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

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

Answer 2

您的 Route JSX 标签需要密钥。这是列表迭代的 child 。 Section 只是每个 Route 组件中的一个 child 组件。

  <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

Console error: index.js:1 Warning: Each child in a list should have a unique "key" prop

Console error: index.js:1 Warning: Each child in a list should have a unique "key" prop

javascript

key

reactjs