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

【问题标题】：React error with missing unique "key" prop when unique identifiers are already present当唯一标识符已经存在时，对缺少唯一“关键”道具的错误做出反应
【发布时间】：2022-07-07 08:10:42
【问题描述】：

该应用程序是使用 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>

【问题讨论】：

在experience.works 上方的地图中有一个片段，它是地图的子元素，因此需要密钥，不是吗？
你错过了这行<motion.div className="app__skills-exp-item" key {experience.year}>中的'='。应该是<motion.div className="app__skills-exp-item" key={experience.year}>
@Geoff Ball - 我明白你在说什么，但是上面的代码块可能无法显示整个画面。我正在使用 framer-motion 所以，打开的 div 包含在 experience.works 上的地图是一个然后，我映射，然后地图返回一个片段，然后是另一个 motion.div，以及一个 ReactToolTip .因为我希望 map 方法返回 2 个标签，所以我使用了一个片段。此地图中的键（work.name）位于打开标记内
@yohanes - 不确定您的意思，key={experience.year} 包含在我原始帖子的上述代码块中。
您是复制粘贴代码还是手动输入？

标签： javascript reactjs sanity

【解决方案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>

【讨论】：

好的，这很有趣。我明白你的建议，我已经在这里应用了。每次使用 .map 时，我都将索引添加为参数，然后在每个打开的 div 中，我将唯一标识符设为项目，例如：item={work.name}，然后添加键的索引，例如：key= {指数}。我仍然看到同样的错误：react-jsx-dev-runtime.development.js:117 警告：列表中的每个孩子都应该有一个唯一的“关键”道具。检查Skills的渲染方法。

【解决方案2】：

正如接受的答案here 中所述，密钥必须位于地图的最外层子节点上。 experience.works.map() 中的情况并非如此，因此如果您将 <> 更改为 <React.Fragment key={work.name}>，如果错误会消失，我会很感兴趣。

【讨论】：