警告: 列表中的每个子元素都应该有一个独特的“键”道具

我正在使用 Google Books API 构建一个应用程序，我似乎正在向列表中的每个孩子传递一个唯一的键，但错误不会消失。我一定是做错了什么，但我不确定是什么。

const BookList = (props) => {
//map over all of the book items to create a new card for each one in the list
const books = props.books.data.items.map((book) => {
console.log(book.id);
return (
<div className="col col-lg-4 grid-wrapper">
<BookCard
key={book.id}
image={book.volumeInfo.imageLinks.thumbnail}
title={book.volumeInfo.title}
author={book.volumeInfo.authors[0]}
description={book.volumeInfo.description}
previewLink={book.volumeInfo.previewLink}
buyLink={book.saleInfo.buyLink}
/>
</div>
);
});


return <div>{books}</div>;
};

注意，在返回 const books之后，我有一个 console.log(book.id)，它将在控制台中显示所有10个唯一的 id键。但是当我尝试使用 key={book.id}将它传递给这个组件的子组件时，就会得到这个错误。

106533 次浏览
小开
最佳答案

key需要处理返回的最外层元素。在您的特定情况下，这意味着更改以下内容:

            <div className="col col-lg-4 grid-wrapper">
<BookCard
key={book.id}

回到这里:

            <div className="col col-lg-4 grid-wrapper" key={book.id}>
<BookCard
小开

我在 map()调用中使用的是 React 片段的简单语法形式，遇到的警告与下面的代码相同:

<>
<h3>{employee.department}</h3>
<TableRow
key={employee.id}
cellValues={["Name", "Title"]} />


<TableRow
key={employee.id}
cellValues={[employee.name, employee.title]}
/>
</>

基于已接受的答案，我意识到我需要最外面的元素来获得 ID。我学到了 React 片段的另一种语法，它允许人们在片段上放置 ID。下面的代码导致警告消失:

<React.Fragment key={employee.id}>
<h3>{employee.department}</h3>
<TableRow
cellValues={["Name", "Title"]} />


<TableRow
cellValues={[employee.name, employee.title]}
/>
</React.Fragment>

提交答案