我正在使用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}将其传递给该组件的子组件时,会出现此错误。
在key需要去最返回元素。在您的特定情况下,这意味着更改此:
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