Question

我正在使用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>
    );
}

请注意，在返回常量书之后，我有一个console.log（book.id），它将在控制台中显示所有10个唯一的id键。但是，当我尝试使用key = {book.id}将其传递给该组件的子组件时，会出现此错误。

Answer 1

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

旁注：您的console.log属于return语句之前，而不是内部。

警告：列表中的每个孩子都应该有一个唯一的“关键”道具

1 个答案: