反应列表中的每个孩子都应该有一个唯一的“关键”道具。即使钥匙存在答案

【问题标题】：React Each child in a list should have a unique "key" prop. even if the key is present反应列表中的每个孩子都应该有一个唯一的“关键”道具。即使钥匙存在
【发布时间】：2021-06-12 00:00:49
【问题描述】：

我有以下反应组件，我在其中使用 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;

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

【问题讨论】：

标签： reactjs components key rendering

【解决方案1】：

我认为这是因为主要孩子是您的 Fragment (<>)。

您必须将key 属性提供给您从map 函数返回的主元素。

试着把你的回报改成这样：

<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';

【讨论】：

谢谢！这就是问题所在。