React 列表中的每个 child 都应该有一个唯一的 "key" 道具。即使钥匙存在

Question

我有以下 React 组件，我在其中使用 uuid 设置渲染键，但仍然收到警告 index.js:1 Warning: Each child in a list should have a unique "key" prop.

import React, { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";

const Breadcrumbs = (props) => {
  const { path, lang } = props;
  const [breadcrumbsItems, setBreadcrumbsItems] = useState(null);

  useEffect(() => {
    if (path) {
      const content = path.map((item, index) => {
        if (!item.text) return null;
        const isLast = index + 1 === path.length ? true : false;
        return (
          <>
            {isLast ? (
              <span key={uuidv4()} className={"post post-jobs current-item"}>
                {item.text}
              </span>
            ) : (
              <span key={uuidv4()} property="itemListElement" typeof="ListItem">
                <a
                  property="item"
                  typeof="WebPage"
                  title={item.title}
                  href="/"
                  className="home"
                >
                  <span property="name">{item.text}</span>
                </a>
              </span>
            )}
          </>
        );
      });

      setBreadcrumbsItems(content);
    }
  }, [path]);

  return (
    <div key={uuidv4()}>
      {breadcrumbsItems ? (
        <div className="breadcrumbs uk-visible@m">
          {breadcrumbsItems && breadcrumbsItems}
        </div>
      ) : null}
    </div>
  );
};

export default Breadcrumbs;

在这种情况下我的代码有什么问题？

Answer 1

我认为这是因为主要 child 是您的片段 (<>)。

您必须从 map 函数向 return 的主要元素提供 key 属性。

尝试将您的 return 更改为如下内容：

<Fragment key={uuidv4()}>
  {isLast ? (
    <span className={"post post-jobs current-item"}>
      {item.text}
    </span>
  ) : (
    <span property="itemListElement" typeof="ListItem">
      <a
        property="item"
        typeof="WebPage"
        title={item.title}
        href="/"
        className="home"
      >
        <span property="name">{item.text}</span>
      </a>
    </span>
  )}
</Fragment>

并且不要忘记从 react:

导入 Fragment

import { Fragment } from 'react';

React 列表中的每个 child 都应该有一个唯一的 "key" 道具。即使钥匙存在

React Each child in a list should have a unique "key" prop. even if the key is present

reactjs

components

key

rendering