唯一键反应，解决方案？

Question

如何在此代码中传递密钥？

{result.map(book, key => 我卡在这里了。我试了好几次都不行！

          { 
             result.map(book => (
                    <div className="col-md-3 mb-5">
                        <div className="card card-body bg-light text-center h-100">
                            <img className="w-100 mb-2" src={book.volumeInfo.imageLinks !== undefined ? book.volumeInfo.imageLinks.thumbnail : ''} alt={book.title} />
                            <h3 className="text-dark card-title">{book.volumeInfo.title}</h3>
                            <h5 className="text-dark card-title">{book.volumeInfo.authors}</h5>
                            </Link>
                        </div>
                    </div>
                   ))
          }

Answer 1

Key 属性必须是唯一的，以免破坏 React 规则。所以我建议你使用 book.id 如果它有属性或数组索引 map((book,index)=>{})。请注意，如果您的代码中有多个地图，实际上在您的整个应用程序中，这种方法可能会失败，因为会有更多组件具有相同的键属性.

所以我建议您使用带有防止重复前缀的密钥。例如

books.map((book, idx)=><Book key={`book_${idx}`} />)

默认情况下这种方法不安全，因此您需要确保不会生成具有相同键的元素。

Answer 2

您好像漏掉了括号。

如果你想使用项目索引作为键，你可以尝试：

{result.map((book, index) => <div key={index} ...>...</div>)}

但是，不建议对键使用索引。最好使用数据中的 ID 作为键。

有关此的更多信息：Index as a key is an anti-pattern。

Answer 3

React.Children.toArray 解决了这个问题，因为它将 children 的键分配给自己。这样做

{React.Children.toArray(
result.map(book => (
                    <div className="col-md-3 mb-5">
                        <div className="card card-body bg-light text-center h-100">
                            <img className="w-100 mb-2" src={book.volumeInfo.imageLinks !== undefined ? book.volumeInfo.imageLinks.thumbnail : ''} alt={book.title} />
                            <h3 className="text-dark card-title">{book.volumeInfo.title}</h3>
                            <h5 className="text-dark card-title">{book.volumeInfo.authors}</h5>
                            </Link>
                        </div>
                    </div>

                )))}

Answer 4

最好的方法是使用书籍的唯一键 (ID)。例如，如果您要删除书籍，可能会出现问题。

我不知道你的 API 实现，但它可能看起来像这样：

 {result.map(book => (
    <div className="col-md-3 mb-5" key={book.id}>
        <div className="card card-body bg-light text-center h-100">
            <img className="w-100 mb-2" src={book.volumeInfo.imageLinks !== undefined ? book.volumeInfo.imageLinks.thumbnail : ''} alt={book.title} />
            <h3 className="text-dark card-title">{book.volumeInfo.title}</h3>
            <h5 className="text-dark card-title">{book.volumeInfo.authors}</h5>
            </Link>
        </div>
    </div>
))}

唯一键反应，解决方案？

Unique key React, solution?

key

reactjs