列表中的每个子元素都应该有一个用于子 DOM 元素的唯一“键”道具答案

【问题标题】：Each child in a list should have a unique "key" prop for subchild DOM elements列表中的每个子元素都应该有一个用于子 DOM 元素的唯一“键”道具
【发布时间】：2021-06-18 07:46:46
【问题描述】：

我正在尝试使用多个子组件映射 return 语句并收到 ESLint 错误

    console.error
      Warning: Each child in a list should have a unique "key" prop.

这是我的反应代码：

const EmployeeDetails = ({ employeeid }) => {
    return (
            <div>
            <strong>Employee Overview Details</strong>
            </div>
            <div className="flex-container" key="test">
            {employeeOverviewDetails.map((detail, index) => {
            return (
            <>
            {detail.heading === 'Employee ID' && (
            <div
                className="indiviual-flex"
                key={index}
                >
                <small key={detail.heading}>
                {detail.heading}
                </small>
                <br />
                <strong key={detail.value}>
                {employeeid}
                </strong>
            </div>
            )}
            {detail.heading !== 'Employee ID' && (
            <div
                className="indiviual-flex"
                key={detail.heading}
                >
                <small>{detail.heading}</small>
                <br />
                <strong>{detail.value}</strong>
            </div>
            )}
            </>
            )
            })}
            </div>
    )
}

我正在为每个元素传递密钥，但 ESLint 不断警告有关唯一“密钥”道具

【问题讨论】：

这能回答你的问题吗？ Understanding unique keys for array children in React.js
关于主题的官方文档在这个reactjs.org/docs/lists-and-keys.html#keys上很清楚
我看到了文档。即使添加了key 属性，问题/警告仍然存在

标签： javascript reactjs react-hooks

【解决方案1】：

您缺少一个片段：

const EmployeeDetails = ({ employeeid }) => {
  return (
    <>
      <div>
        <strong>Employee Overview Details</strong>
      </div>
      <div className="flex-container" key="test">
        {employeeOverviewDetails.map((detail, index) => {
          return (
            <>
              {detail.heading === "Employee ID" && (
                <div className="indiviual-flex" key={index}>
                  <small key={detail.heading}>{detail.heading}</small>
                  <br />
                  <strong key={detail.value}>{employeeid}</strong>
                </div>
              )}
              {detail.heading !== "Employee ID" && (
                <div className="indiviual-flex" key={detail.heading}>
                  <small>{detail.heading}</small>
                  <br />
                  <strong>{detail.value}</strong>
                </div>
              )}
            </>
          );
        })}
      </div>
    </>
  );
};

你不能在 React 中并排放置 2 个元素，要么使用这种语法

<> </>

要环绕并排或使用的元素，您可以像这样从 React 导入 Fragment：

import { Fragment } from "react";

然后将与Fragment并排的元素包装成这样：

<Fragment></Fragment>

或者如果您不想导入Fragment，您也可以使用React.Fragment。但您需要为此导入 react。

【讨论】：