我正在开发一个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>
我试过在工具提示中使用关键字,但是没有用
1条答案
按热度按时间ccgok5k51#
列表中的每个元素都应该有一个关键属性。
当你这样做的时候:
您使用的组件称为
Fragment
,<></>
是编写它的快捷方式,但它不能包含以这种方式编写的key
prop。通常使用快捷方式而不是全名,但在特定情况下,您应该这样写: