Javascript 在控制台中出现此错误时，列表中的每个子级都应具有唯一的；“关键”；道具

我面临的问题有点奇怪，我正在迭代数据，我可以看到在数组的第一项中显示所有的道具，但是它显示的其他项目中除了（book.naretd，book.length）之外的所有道具，我在控制台

中出错，列表中的每个子项都应该有一个唯一的“键”prop.

这可能会给我带来一个问题，那就是我从中获取数据的API

从“React”导入React
从“./HoverBooks”导入悬停簿；
从“react router dom”导入{useHistory，Link}；
常量书籍=（{category}）=>{
报税表（
{category.slice（0,5）.map（（book）=>{
返回(
{book.bookName}
按{book.By}
Narreted by:{book.Narreted}
长度：{book.Length}
发布日期：{book.ReleaseDate}
语言：{book.Language}
{book.rating}
)})}
)
}
导出默认书籍

Narreted by:{book.Narreted | | book[Narreted by”]}
长度：{book.Length | | book[“Length”]}

有不同的键，请检入API

Narreted by:{book.Narreted | | book[Narreted by“]}
长度：{book.Length | | book[“Length”]}

---

存在不同的密钥，请检入API最明显的问题是返回的数据集看起来密钥不一致。您提到的书籍数组中的第一项被正确返回，但是下面的键

Narreted

和

length

不再工作。这是因为从索引1开始的响应对象（我没有全部检查）有不同的键。具体而言，例如索引1中的键为：

narretted by

长度

首先尝试看看为什么键与API源代码不一致，这应该会让您走上正确的轨道。通常，您希望您的关键点是spine case或snake case，而不是“narreed”+“by”之间的空格

---

最明显的问题是返回的数据集看起来键不一致。您提到的书籍数组中的第一项被正确返回，但是下面的键

Narreted

和

length

不再工作。这是因为从索引1开始的响应对象（我没有全部检查）有不同的键。具体而言，例如索引1中的键为：

narretted by

长度

首先尝试看看为什么键与API源代码不一致，这应该会让您走上正确的轨道。通常，您希望您的关键点是spine case或snake case，而不是“narreed”+“by”之间的空格

---

把钥匙放在你的碎片上，因为那是包装物品。是的；使用

..

而不是

..

，同时从子项中删除

键={…}

。将键放在片段上，因为这是包装项。是；使用

..

而不是

..

，同时从子项中删除

键={…}

。

import React from 'react'
import HoverBooks from './HoverBooks';
import { useHistory, Link } from "react-router-dom";

const Books = ({category}) => {
    return (     
        <div className='books__main'>      
        {category.slice(0, 5).map((book) => {       
          return(
            <>
           <HoverBooks 
           key={book.id}
           {...book}       
           />    
           <div className='book__content'>
            <li key={book.id}>{book.bookName}</li>
             <h4>By{book.by}</h4>
             <h4>Narreted by:{book.Narreted}</h4>
             <h4>Length: {book.length}</h4>
             <h4>Release Date: {book.ReleaseDate}</h4>
             <h4>Language: {book.Language}</h4>
             <h4>{book.rating}</h4>
           </div>           
            </>
        )})}

 </div>
    )
}
export default Books

     <h4>Narreted by:{book.Narreted || book[Narreted by"]}</h4>
         <h4>Length: {book.length || book["Length"]}</h4>