警告:列表中的每个孩子都应该有一个唯一的“key”props

IT技术 reactjs
2021-03-26 04:16:38

我正在使用谷歌图书 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} 将它传递给这个组件的子组件时,我收到了这个错误。

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 
做到了!键必须位于最外层返回的元素上是否有特定原因?
2021-05-30 04:16:38
绝妙的解决方案
2021-05-30 04:16:38
当 React 遍历一个数组时,它只会直接查看其中的内容。它不会通过寻找密钥一直递归。如果是这样,它会 (1) 很慢,并且 (2) 当有嵌套数组时会导致歧义。
2021-06-02 04:16:38