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