迭代器中缺少元素的"key"道具

Question

import React from 'react'
import { motion } from "framer-motion"
type Props = {}
export default function Projects({}: Props) {
const projects = [1,2];
return (
<motion.div  
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.5 }}
className='h-screen relative flex overflow-hidden flex-col text-left md:flex-row max-w-    full justify-evenly mx-auto items-center z-0'>
<h3 className='absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl'>
Proyectos
</h3>
<div className='relative w-full flex overflow-x-scroll overflow-y-hidden snap-x snap-mandatory z-20 scrollbar-thin scrollbar-track-gray-400/20 scrollbar-thumb-[#61ff45]/80'>
{projects.map((project, i) => (
<div className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>
<motion.img 
initial={{
y: -300,
opacity: 0
}}
transition={{ duration: 1.2 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
src="./img/PHP.png" 
alt="" 
/>

<div className='space-y-10 px-0 md:px-10 max-w-6xl'>
<h4 className='text-4xl font-semibold text-center'>
<span className='underline decoration-[#61ff45]/50'> Caso de estudio {i + 1} de {projects.length}:</span>  Mini Php Lexer
</h4>
<div className='text-lg text-center md:text-left'>
Este es un analizador lexico el cual tiene como proposito procesar y evaluar un codigo en PHP y decir si este se puede ejecutar sin ningun problema, mostrando en pantalla el codigo completo y parte por parte lo que es cada cosa del codigo
</div>
</div>
</div>
))}
</div>
<div className='w-full absolute top-[30%] bg-[#61ff45]/10 left-0 h-[500px] -skew-y-12'/>
</motion.div>
)
}

我试图做一个投资组合，但当我编写npm run dev时，它显示我"水合失败，因为初始UI与服务器上呈现的不匹配"。我认为错误就在这段代码中，因为在vscode中出现了"Missing "key"为迭代器中的元素赋值。我对这些编程语言了解不多，所以我不知道那个错误是什么意思。

Answer 1

在使用map迭代器时写入键

{projects.map((project, i) => (
<div key={i} className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>
<motion.img ...

Answer 2

每当你放置任何循环渲染。

在您的示例中，您应该像这样添加键。

{projects.map((project, i) => (
<div key={project.id} className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>

请不要像React官方文档中提到的那样添加索引键https://reactjs.org/docs/lists-and-keys.html