我正在使用谷歌图书 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 书籍中返回后,我有一个 console.log(book.id),它将在控制台中显示所有 10 个唯一的 id 键。但是当我尝试使用 key={book.id} 将它传递给这个组件的子组件时,我收到了这个错误。