在下一個迭代器中缺少元素的“鍵”道具，js typescript

Question

這是我的投資組合 web 應用程序，我制作了不同的組件，但是當我嘗試“npm run build”時，它給出了以下錯誤：Missing "key" prop for element in iterator, 誰能幫幫我我嘗試添加但它仍然說同樣的代碼：

import React from 'react'
import {motion} from 'framer-motion'
import { Project } from '../typings';
import { urlFor } from '../sanity';
import Image from 'next/image'

type Props = {
    projects: Project[]
}

function Projects({ projects }: Props) {
 
  return (
        <div 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'>
        Projects
        </h3>

  (((error on this line))))  <div className=' relative w-full flex overflow-x-scroll overflow-y-hidden snap-x snap-mandatory z-20 scrollbar scrollbar-track-gray-400/20 scrollbar-thumb-[#f7ab0a]/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={urlFor(project?.image).url()} alt='' />
            <div className='space-y-10 px-0 md:px-10 mx-w-6xl'>
                    <h4 className='text-4xl font-semibold text-center'>
                        <span className='underline decoration-[#f7ab0a]/50'>Case Study {i+1} of {projects.length}:</span> {''}
                        {project?.title}
                    </h4>
                    <div className='flex items-center space-x-2 justify-center'>
                        {project?.technologies.map((technology) => (
                        <Image className='h-10 w-10'
                        key={technology._id} 
                        src={urlFor(technology.image).url()}
                        alt=''
                        />    
                        )
                        )}
                    </div>
                        <p className=' text-lg text-center md:text-left'>
                        {project?.summary}
                       </p>
            </div>
        </div>

       
       ))}
    </div>


        <div className=' w-full absolute top-[30%] bg-[#f7ab0a]/10 left-0 h-[500px] -skew-y-12'/>
        </div>
  )
}

export default Projects

Api 給出完整響應，網站在 localhost 3000 上運行完整

Answer 1

鍵用於幫助渲染器確定已更新/更改的內容。 map 中的第一個 JSX 元素應該始終包含一個鍵。 數組的索引使 map 變得簡單，但是如果您的數組發生變化，這可能會出現問題。

假設不是這種情況，您可以使用數組中元素的索引作為鍵。 為此，更改讀取的行

        <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'>

到以下：

        <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' key={i}>

如果您的元素可能會發生變化，更好的解決方案是為每個項目設置一個唯一的 ID。 然后這個 ID 可以用作密鑰。

在此處閱讀有關鍵的更多信息。