缺少迭代器中元素的“键”道具答案

【问题标题】：Missing "key" prop for element in iterator缺少迭代器中元素的“键”道具
【发布时间】：2023-01-06 22:37:54
【问题描述】：

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 代码时，它向我显示“Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。”我认为错误出在这段代码中，因为在 vscode 中出现“迭代器中元素缺少“键”道具”。我不太了解这些编程语言，所以我不知道该错误是什么意思。

【问题讨论】：

标签： css reactjs typescript eslint tailwind-css

【解决方案1】：

使用映射迭代器时写一个键

{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 ...

【讨论】：

【解决方案2】：

每当您放置任何循环进行渲染时。 React 需要外部类中的键。

在您的情况下，您应该像这样添加密钥。

{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 的键

【讨论】：