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