reactjs 如何修复React中的“列表中的每个子元素都应该有一个唯一的”键“属性”警告?

x33g5p2x  于 2023-05-28  发布在  React
关注(0)|答案(1)|浏览(182)

我正在开发一个React应用程序,我无法修复此警告,请您帮助定位,特别是我需要一个关键
我的代码块在哪里产生的错误-

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>

我试过在工具提示中使用关键字,但是没有用

ccgok5k5

ccgok5k51#

列表中的每个元素都应该有一个关键属性。
当你这样做的时候:

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

您使用的组件称为Fragment<></>是编写它的快捷方式,但它不能包含以这种方式编写的key prop。
通常使用快捷方式而不是全名,但在特定情况下,您应该这样写:

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

相关问题