Javascript 数组或迭代器中的每个子级在reactjs中都应该有一个唯一的“key”属性

我完全糊涂了，因为我的控制台有错误，我阅读了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);

我试着做下一个关键点：

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

但错误仍然存在

请帮忙

---

非常感谢。

因为您正在为本书绘制地图：

ul还需要一个关键道具：

---

原因是您使用的是两个映射，并且只在一个映射中分配密钥，也将密钥分配给，因为它会给您带来错误，请尝试以下操作：

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

---

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

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

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

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

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