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

【问题标题】：Warning: Each child in a list should have a unique "key" prop警告：列表中的每个孩子都应该有一个唯一的“键”道具
【发布时间】：2023-02-17 09:45:50
【问题描述】：

我正在使用 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} 将其传递给该组件的子组件时，出现此错误。

【问题讨论】：

标签： reactjs

【解决方案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) 在存在嵌套数组时会导致歧义。
万一这有其他人：如果你定义了一个自定义组件，而这就是你的列表中的内容，则关键必须继续组件本身的道具，而不是组件返回的 DOM 元素。
这对我也适用，我在 .map 下面有一个父元素，它继续抱怨，我专注于嵌套列表几个小时，现在我已经加载了它们而没有错误
@Brayan reactjs.org/docs/lists-and-keys.html和reactjs.org/docs/reconciliation.html

【解决方案2】：

我在我的 map() 调用中以简单的语法形式使用 React 片段，并且在使用以下代码时遇到了相同的警告：

<>
  <h3>{employee.department}</h3>
  <TableRow
    key={employee.id}
    cellValues={["Name", "Title"]} />

  <TableRow
    key={employee.id}
    cellValues={[employee.name, employee.title]}
  />
</>

基于已接受的答案，我意识到我需要最外层的元素才能拥有 ID。我了解到 React 片段的另一种语法，允许在其上放置一个 ID。下面生成的代码导致警告消失：

<React.Fragment key={employee.id}>
  <h3>{employee.department}</h3>
  <TableRow
    cellValues={["Name", "Title"]} />

  <TableRow
    cellValues={[employee.name, employee.title]}
  />
</React.Fragment>

【讨论】：