如何修复 React 中的“列表中的每个子项都应该有一个唯一的‘key’属性’警告？

Question

我正在开发一个反应应用程序，我无法修复此警告，您可以帮助找到我具体需要密钥的位置吗

这是我生成错误的代码块：

const [experiences, setExperiences] = useState([]);
useEffect(() => {
  const query = '*[_type == "experiences"]';
  const skillsQuery = '*[_type == "skills"]';

  client.fetch(query).then((data) => {
    setExperiences(data);
  });

  client.fetch(skillsQuery).then((data) => {
    setSkills(data);
  });
}, []);

<div className="app__skills-exp">
  {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" key={experience.works}>
        {experience.works.map((work) => (
          <>
            <motion.div
              whileInView={{ opacity: [0, 1] }}
              transition={{ duration: 0.5 }}
              className="app__skills-exp-work"
              data-tip
              // data-for is depricated as v4 using data-tooltip-id instead
              data-tooltip-id={work.name}
              key={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>
          </>
        ))}
      </motion.div>
    </motion.div>
  ))}
</div>;

我尝试过在工具提示中使用键，但没用

Answer 1

列表中的每个元素都应该有一个 key prop。

所以当你这样做时：

{experience.works.map((work) => (
  <>
    <motion.div
      whileInView={{ opacity: [0, 1] }}
      transition={{ duration: 0.5 }}
      className="app__skills-exp-work"
    // ...
  </>
))}

您使用的组件称为

Fragment

，

<></>

是编写它的快捷方式，但它不能包含以这种方式编写的

key

属性。

通常使用快捷方式而不是全名，但在这种特定情况下，您应该这样写：

{experience.works.map((work) => (
  <Fragment key={work.name}>
    <motion.div
      whileInView={{ opacity: [0, 1] }}
      transition={{ duration: 0.5 }}
      className="app__skills-exp-work"
     // ...
  </Fragment>
))}