数组或迭代器中的每个子项在 reactjs 中都应该有一个唯一的“key”道具答案

【问题标题】：Each child in an array or iterator should have a unique "key" prop in reactjs数组或迭代器中的每个子项在 reactjs 中都应该有一个唯一的“key”道具
【发布时间】：2017-06-23 19:25:49
【问题描述】：

我完全糊涂了，因为我的控制台出错了，我阅读了 reactjs 文档和关于 stackoverflow 的所有提示，但我无法理解问题所在。我看到书名列表 ({item.volumeInfo.title})，但控制台出现错误。

这是我的代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class BookList extends Component {
    renderBook(mainData) {
        return(
             <ul>
                {mainData.items.map((item, i) => {
                    return <li key={i} item={item}>{item.volumeInfo.title}</li>
                    })}
             </ul>
        )
    }

    render(){
        return (
            <div className="book-row">
                <div className="book-info">
                    {this.props.book.map(this.renderBook)}
                </div>
            </div>
        );
    }
}

function mapStateToProps({book}) {
    return {book};
}

export default connect(mapStateToProps)(BookList);

它是 API 响应的一部分：

{ "kind": "books#volumes", 
 "totalItems": 288, 
 "items": [ 
  {
   "kind": "books#volume",
   "id": "yXlOAQAAQBAJ",
   "etag": "CG7f2mQ+7Nk",
   "selfLink": "https://www.googleapis.com/books/v1/volumes/yXlOAQAAQBAJ",
   "volumeInfo": {
    "title": "Nineteenth Century Home Architecture of Iowa City",
    "subtitle": "A Silver Anniversary Edition"

我试着做下一个键：

key={item.etag}，key={i}，key={item.volumeInfo.title}

但错误仍然存在。

请帮忙。

非常感谢。

【问题讨论】：

标签： javascript reactjs key

【解决方案1】：

由于您正在映射book：

{this.props.book.map(this.renderBook)}

ul 还需要一个 key 属性：

renderBook(mainData, bookIdx) {
        return(
             <ul key={bookIdx}>
                {mainData.items.map((item, i) => {
                    return <li key={i} item={item}>{item.volumeInfo.title}</li>
                    })}
             </ul>
        )
    }

这是因为会有很多 ul 兄弟姐妹，React 需要区分它们（与 li 相同）。

但是，最好（如果可能）使用不是数组索引的键。所以，如果book 和item 有唯一标识符，最好使用它。

所以，看起来您在提供的示例数据之外还有另一个数组：

[
 { "kind": "books#volumes", 
   "totalItems": 288, 
   "items": [ 
    {

【讨论】：

非常感谢，它正在工作！我完全同意使用数组中的数据，我会使用其中的键。

【解决方案2】：

原因是您使用了两个map，并且只在一个中分配了key，也将key 分配给<ul>，因为它会给您错误，试试这个：

renderBook(mainData, index) {
    return(
        <ul key={index}>
            {mainData.items.map((item, i) => {
                 return <li key={i} item={item}>{item.volumeInfo.title}</li>
             })}
        </ul>
      )
}

【讨论】：