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

Posted 2023-02-22

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

【英文标题】：Warning: Each child in a list should have a unique "key" prop

【发布时间】：2019-08-04 20:06:00

【问题描述】：

我正在使用 google 图书 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 book 中返回后，我有一个 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 

【讨论】：

做到了！键必须在最外层返回的元素上是否有特定原因？

当 React 遍历一个数组时，它只会直接查看里面的东西。它不会在寻找密钥的过程中一直递归。如果是这样，它会 (1) 很慢，并且 (2) 在存在嵌套数组时会导致歧义。

出色的解决方案