列表中的每个孩子都应该有一个唯一的“关键”道具/反应答案

【问题标题】：Each child in a list should have a unique "key" prop / react列表中的每个孩子都应该有一个唯一的“关键”道具/反应
【发布时间】：2021-10-18 08:20:25
【问题描述】：

我正在努力摆脱此错误消息。我的代码做错了什么？我看不出应该在哪里添加密钥。

import { AiOutlineLaptop } from "react-icons/ai";
import { FaBootstrap, FaReact } from "react-icons/fa";
const data = [
  { "Id": "1",
    "title": "Create Components",
    "text": "Lorem ipsum dolor sit amet consectetur.",
    "icon": AiOutlineLaptop,
    "icon1": "fas fa-shopping-cart",
  },
  {
    "Id": "2",
    "title": "Data Input",
    "text": "Lorem ipsum dolor sit amet consectetur.",
    "icon": "fas fa-circle fa-stack-2x",
    "icon1": "fas fa-laptop fa-stack-1x fa-inverse",
  },
  { "Id": "3",
    "title": " React Life Cycle Method",
    "text": "Lorem ipsum dolor sit amet consectetur.",
    "icon": "fas fa-circle fa-stack-2x",
    "icon1": "fab fa-btc fa-stack-1x fa-inverse",
  },

];

const icons = [
  AiOutlineLaptop,
  FaReact,
  FaBootstrap,
];


const Skills = () => {
  return (
    <>
      <section className="page-section" id="services">
        <div className="container">
          <div className="text-center">
            <h2 className="section-heading text-uppercase">Skills</h2>
            <h3 className="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
          <div className="row text-center">

            {data.map((link, idx) => {
              const Icon = icons[idx];
              return (
                <div className="col-md-4">
                  <Icon className="icon" key={icons[idx]} />
                  <h4 className="my-3" key={idx}>{link.title}</h4>
                  <p className="text-muted">{link.text}</p>
                </div>
              )
            })}

          </div>
        </div>
      </section>
    </>
  );
}

export default Skills;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

迭代中的每个项目都需要一个唯一的identifier 用于 React 的内部工作。在最外层元素添加key

<div className="col-md-4" key={link.id}>

【讨论】：

【解决方案2】：

在 React 中使用 map 渲染组件时，您应该始终为顶部元素提供 unique 键，在您的情况下，简单的方法是像这样使用索引 (idx)

 {data.map((link, idx) => {
          const Icon = icons[idx];
          return (
            <div key={idx} className="col-md-4">
              <Icon className="icon" key={icons[idx]} />
              <h4 className="my-3" key={idx}>{link.title}</h4>
              <p className="text-muted">{link.text}</p>
            </div>
          )
        })}

【讨论】：

嗨@JimmySoussan，我在下面的代码中遇到了同样的问题。我添加了一个认为它合适但仍然收到关键警告消息的密钥。请问您能帮忙吗？
这可能是因为密钥不是唯一的，请分享您的代码以便我们提供帮助:)