React列表渲染报错Each child in a list should have a unique "key" prop如何解决

错误原因 #

• Each child in a list should have a unique "key" prop要求的是map遍历输出的直接子节点添加唯一key，你当前把key加在了循环内部的子标签上，没有给到map返回的最外层根元素，所以报错无法消除。
• 你给内部Icon、h4加的key属于多余配置，完全没有作用。

修正方案 #

修改data.map部分的代码，给返回的最外层div添加key，直接用你的data中自带的唯一Id字段即可，修正后的完整代码如下：

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 (
                // 唯一key加在map返回的最外层元素上
                <div className="col-md-4" key={link.Id}>
                  <Icon className="icon" />
                  <h4 className="my-3">{link.title}</h4>
                  <p className="text-muted">{link.text}</p>
                </div>
              )
            })}
          </div>
        </div>
      </section>
    </>
  );
}

export default Skills;  

注意事项 #

• 只有循环渲染的节点需要加key，非循环节点不需要额外配置key
• 优先使用业务数据里的唯一ID作为key值，尽量不要用数组下标idx作为key，避免列表排序、增删项时出现渲染异常

内容的提问来源于stack exchange，提问作者Leo