Javascript 获取数组中的子项无键错误

我得到下面的错误。然而，我相信我已经正确地在li元素上放置了一个唯一的键。我需要在别的地方做吗

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListBooks`. 
        in Book (at ListBooks.js:26)
        in ListBooks (at App.js:60)

来自Book.js文件的代码

render() {
  console.log(this.props.book.id);
  return (
    <li key={this.props.book.id}>
      <div className="book">
        <div className="book-top">
          <div
            className="book-cover"
            style={{
              width: 128,
              height: 193,
              backgroundImage: `url(${this.props.book.imageLinks.thumbnail})`,
            }}
          />
          <div className="book-shelf-changer">
            <select
              value={this.getShelfFromBook(this.props.book)}
              onChange={event =>
                this.props.updateSelect(this.props.book, event.target.value)
              }
            >
              <option value="disabled" disabled>
                Move to...
              </option>
              <option value="wantToRead">Want to Read</option>
              <option value="currentlyReading">Currently Reading</option>

              <option value="read">Read</option>
              <option value="none">None</option>
            </select>
          </div>
        </div>
        <div className="book-title">{this.props.book.title}</div>
        <div className="book-authors">{this.props.book.authors}</div>
      </div>
    </li>
  );
}

render（）{
console.log（this.props.book.id）；
返回(

this.props.updateSelect（this.props.book、event.target.value）
}
>
搬到。。。
想读书吗
正在阅读
阅读
没有一个
{this.props.book.title}
{this.props.book.authors}

);
}

来自父组件的代码

{
  wantRead.map(book => (
    <Book
      updateSelect={this.props.updateSelect}
      book={book}
      books={this.props.books}
    />
  ));
}

{
wantRead.map（book=>(
));
}

---

Github reference

尝试将

键

道具放在

列表中，而不是放在

组件中：

{
  wantRead.map(book => (
    <Book
      key={book.id}
      updateSelect={this.props.updateSelect}
      book={book}
      books={this.props.books}
    />
  ));
}

{
wantRead.map（book=>(
));
}

检查

关键点仅在周围数组的上下文中才有意义

---

因此，键应该在

映射中的
上

您需要为每个孩子提供一个uniqe键

因此可以使用节点uuid

```

npm安装uuid
const uuidv1=require（'uuid/v1'）；
//uuidv1（）；⇨ 'f64f2940-fae4-11e7-8c5f-ef356f279131'
{
wantRead.map（book=>(
));
}

---

```

OP已经有

book.id

，为什么要引入另一个唯一的id？还是从另一个图书馆来的？

npm install uuid
const uuidv1 = require('uuid/v1');
//uuidv1(); ⇨ 'f64f2940-fae4-11e7-8c5f-ef356f279131'


{
  wantRead.map(book => (
    <Book
      key={uuidv1()}
      updateSelect={this.props.updateSelect}
      book={book}
      books={this.props.books}
    />
  ));
}