React列表已配置唯一标识仍报缺失key属性问题排查

警告触发点在最内层工作经历的遍历逻辑，和你外层技能、年份列表的key配置无关：

• 你在experience.works.map()的回调中，使用了React Fragment短语法<></>作为每个列表项的根返回值，这个Fragment才是React虚拟DOM识别到的列表直接子元素，但短语法Fragment不支持接收任何属性，自然也无法绑定key。
• 你把key={work.name}写在了Fragment内部包裹的<motion.div>标签上，React不会递归查找内部元素的key作为列表项标识，因此判定该层列表存在缺少key的子节点，抛出警告。
• 另外你贴出的技能列表渲染代码中混入了一段冗余的`enter code here`文本，属于代码编辑/粘贴时的残留内容，虽然和key警告无关，但会导致React解析属性时报错，建议一并删除。

两种方案按需选择即可：

• 方案1（推荐，适配你当前的代码结构）：直接删除多余的空Fragment包裹，让<motion.div>作为map遍历返回的直接根节点，你原本写在motion.div上的key就会被React正确识别，修正后的代码片段如下：

{experience.works.map((work) => (
  <motion.div
    whileInView={{ opacity: [0, 1] }}
    transition={{ duration: 0.5 }}
    className="app__skills-exp-work"
    data-tip
    data-for={work.name}
    key={work.name}
  >
    <h4 className="bold-text">{work.name}</h4>
    <p className="p-text">{work.company}</p>
  </motion.div>
))}

• 方案2（需要包裹多个同级元素时使用）：如果后续你需要在该遍历块中添加和motion.div同级的其他元素，必须替换短语法Fragment为React官方导出的显式Fragment组件，将key绑定在Fragment标签上：

// 先在文件头部引入Fragment
import { Fragment } from 'react';

// 遍历逻辑修改为
{experience.works.map((work) => (
  <Fragment key={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>
    {/* 其他同级元素可以放在这里 */}
  </Fragment>
))}

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