React.js中列表唯一key属性分配问题求助

问题说明 #

在渲染工作经历列表时，持续收到React错误提示：Each child in a list should have a unique "key" prop.，虽然已给内部的motion组件添加key，但错误仍未消除，问题集中在className为app__skills-exp-works的容器内的map循环逻辑中。

错误原因 #

1. key的位置错误：在experience.works.map循环里，你用<>（React Fragment）包裹了motion.div和ReactTooltip两个元素，但key只加在了内部的motion.div上。React要求列表循环返回的最外层元素必须携带key，Fragment作为最外层容器，没有key的话，React会将其内部的两个元素视为列表的独立子项，导致缺少key报错。
2. key的唯一性风险：当前用work.name作为key，若不同工作项的name存在重复（比如不同公司的同名岗位），也会触发key重复的错误。从数据截图来看暂时无重复，但建议用数据库返回的唯一ID（如work._id）作为key，这是更可靠的方案。

修复步骤 #

步骤1：给最外层Fragment添加key #

将key从内部的motion.div移到包裹它的Fragment上，使用带key的Fragment语法（<React.Fragment key={...}>）。

步骤2：替换为更可靠的key（可选但推荐） #

如果数据库返回的工作项有唯一ID（如_id），替换work.name为work._id作为key，避免因name重复导致的潜在问题。

修改后的代码示例 #

<>
  <div className="app__skills-container">
    <motion.div className="app__skills-list">
      {skills.map((skill) => (
        <motion.div
          whileInView={{ opacity: [0, 1] }}
          transition={{ duration: 0.5 }}
          className="app__skills-item app__flex"
          key={skill.name}
        >
          <div
            className="app__flex"
            style={{ backgroundColor: skill.bgColor }}
          >
            <img src={urlFor(skill.icon)} alt={skill.name} />
          </div>
          <p className="p-text">{skill.name}</p>
        </motion.div>
      ))}
    </motion.div>
    <div className="app__skills-exp">
      {experiences.map((experience) => (
        <motion.div
          className="app__skills-exp-item"
          key={experience.year}
        >
          <div className="app__skills-exp-year">
            <p className="bold-text">{experience.year}</p>
          </div>

          <motion.div className="app__skills-exp-works">
            {experience.works.map((work) => (
              {/* 给最外层Fragment添加key */}
              <React.Fragment key={work._id || work.name}>
                <motion.div
                  whileInView={{ opacity: [0, 1] }}
                  transition={{ duration: 0.5 }}
                  className="app__skills-exp-work"
                  data-tip
                  data-for={work.name}
                >
                  <h4 className="bold-text">{work.name}</h4>
                  <p className="p-text">{work.company}</p>
                </motion.div>

                <ReactTooltip
                  id={work.name}
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  {work.desc}
                </ReactTooltip>
              </React.Fragment>
            ))}
          </motion.div>
        </motion.div>
      ))}
    </div>
  </div>
</>

额外提示 #

• 永远确保列表循环返回的最顶层元素携带唯一key，不要把key加在内部嵌套元素上。
• 优先使用后端返回的唯一标识（如ID）作为key，避免用可能重复的字段（如名称、年份）。

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