我如何解决“列表中的每个 child 应该有一个唯一的 "key" 道具。”的警告？

Question

显然这个警告指向这个（特别是在技能的关键）：

      {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 />
          
          <p>{skill.name}</p>
        
      ))}
    
    
      {experiences.map((experience) => (
        <motion.div
          className="app__skills-exp-item"
          key={experience.year}
        >
          
            <p>{experience.year}</p>
          
          
            {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>{work.name}</h4>
                  <p>{work.company}</p>
                
                <ReactTooltip
                  id={work.name}
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  {work.desc}
                
              </>
            ))}
          
        
      ))}

我尝试写 skills.name 而不是 skill.name 并写 skill.id 而不是 skill.name 也尝试了 work.name 相同但我认为问题是技能而不是工作。

Answer 1

您需要将密钥放入第二张地图的片段中。这意味着您需要 import { Fragment } from "react" 并使用它（我说的是 experience.works.map 行）

一般的经验法则是，如果您在 React 中映射 [组件]，则需要一个密钥。

遗憾的是，您目前无法将 shorthand 用于带有密钥的片段 <></>，因此需要导入它。

import { Fragment } from "react"
...
{experience.works.map((work,index) => (
              <Fragment key={index}>
                <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>{work.name}</h4>
                  <p>{work.company}</p>
                
                <ReactTooltip
                  id={work.name}
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  {work.desc}
                
              </>
            ))}

我如何解决“列表中的每个 child 应该有一个唯一的 "key" 道具。”的警告？

How can i fix the warning of " Each child in a list should have a unique "key" prop."?

reactjs

warnings