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

Posted 2023-02-23

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

【英文标题】：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;

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

【参考方案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';

【讨论】：

谢谢！这就是问题所在。