如何修复React中‘列表子元素需唯一key属性’警告并定位key位置

问题定位 #

警告的核心来源是内层experience.works.map循环中的Fragment（<>）未添加key。React要求列表循环返回的直接顶层元素必须携带唯一key，你给内部motion.div加key的操作无效，因为这个Fragment才是map返回的直接子元素，是需要绑定key的层级。

具体修复步骤 #

1. 替换无key的短Fragment语法：
   短语法<>不支持添加key，必须改用完整的<React.Fragment>标签，并绑定唯一标识作为key。优先选用数据自带的唯一ID（比如Sanity文档的_id，你从Sanity取的数据默认会包含这个字段）；如果work对象没有唯一ID，可用work.name + work.company的组合值确保唯一性。
2. 优化外层循环的key（可选但推荐）：
   外层experiences.map用experience.year当key存在重复风险——若多个experience条目同属一年，key会冲突。建议改用每个experience文档的_id作为key，这是更可靠的唯一标识。

修复后的代码片段 #

<div className="app__skills-exp">
  {experiences.map((experience) => (
    // 改用Sanity文档的_id作为外层key，避免年份重复导致的key冲突
    <motion.div className="app__skills-exp-item" key={experience._id}>
      <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，优先用work._id，无则用名称+公司的组合值
          <React.Fragment key={work._id || `${work.name}-${work.company}`}>
            <motion.div
              whileInView={{ opacity: [0, 1] }}
              transition={{ duration: 0.5 }}
              className="app__skills-exp-work"
              data-tip
              data-tooltip-id={work.name}
            >
              <h4 className="bold-text">{work.name}</h4>
              <p className="p-text">{work.company}</p>
            </motion.div>
            <Tooltip
              id={work.name}
              effect="solid"
              arrowColor="#fff"
              className="skills-tooltip"
            >
              {work.desc}
            </Tooltip>
          </React.Fragment>
        ))}
      </motion.div>
    </motion.div>
  ))}
</div>

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