当唯一标识符已经存在时，对缺少唯一“关键”道具的错误做出反应

Question

该应用程序是使用 React 前端的产品组合，我使用 Javascript 而非 Typescript 编写。 我使用 Sanity 作为无头 CMS 来存储数据。

我正在使用 useEffect 来获取数据。 我使用 .map 循环遍历每个部分，为我的站点呈现以下信息：skill.name、experience.year、work.name。 这些部分中的每一个都在自己的内部，并且每个部分都有一个唯一的键：skill.name、experience.year、work.name。

我知道我必须在 React 中给组件中的每个孩子一个“唯一的‘关键’道具”。 我正在渲染的内容已经具有唯一标识符：skill.name、experience.year、work.name

产生的错误如下：警告：列表中的每个孩子都应该有一个唯一的“关键”道具。 检查Skills的渲染方法。

有人对我在这里缺少的东西有什么建议吗？

<div className="app__skills-container">
    <motion.div className="app__skills-list">
      {/* fetch Skills from Sanity CMS and map over them*/}
      {skills?.map((skill) => (
        <motion.div whileInView={{ opacity: [0, 1] }} transition={{ duration: 0.5 }} `enter code here`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>

<motion.div className="app__skills-exp">
      {/* {console.log("----- skills-exp:", experience.works)} */}
      {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">
            {/* 1st loops of year, then loop over the experiences contained within */}
            {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>

Answer 1

如果您不确定没有重复键，您可以随时在map中使用辅助索引，如下所示：

<TableBody>
    {
        products ?
            (
                products.length > 0 ?
                    products.map((product, idx) => (
                        <TableRowProduct
                            key={idx}
                            item={product}
                        />
                    ))
                    :
                    <TableRow>
                        <TableCell align="center" colSpan={columns.length}>
                            <Alert severity="info">The list is empty/Alert>
                        </TableCell>
                    </TableRow>
            )
            :
            <TableRow>
                <TableCell align="center" colSpan={columns.length}><CircularProgress/></TableCell>
            </TableRow>
    }
</TableBody>

Answer 2

如此处接受的答案中所述，密钥必须位于地图的最外层子项上。 在experience.works.map()中不是这种情况，因此如果您将<>更改为<React.Fragment key={work.name}> ，我会很感兴趣。