唯一键 React，解决方案？答案

【问题标题】：Unique key React, solution?唯一键 React，解决方案？
【发布时间】：2021-06-16 11:42:44
【问题描述】：

如何在这段代码中传递密钥？

{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>
                   ))
          }

【问题讨论】：

{result.map((book,index) => (<div key={index} className="col-md-3 mb-5">..... 这样做会解决您的问题

标签： reactjs key

【解决方案1】：

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

{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>

                )))}

【讨论】：

【解决方案2】：

最好的方法是使用书籍的唯一键 (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>
))}

【讨论】：

【解决方案3】：

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

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

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

这种方式默认是不安全的，所以需要确保不会生成具有相同key的元素。

【讨论】：

【解决方案4】：

您似乎缺少括号。

如果想用item index作为key，可以试试：

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

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

更多信息：Index as a key is an anti-pattern。

【讨论】：