Question

我收到以下错误。但是，我相信我已经正确地在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>
  );
}

来自父组件的代码

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

Github参考here

Answer 1

尝试将key道具放在<Book>列表上，而不是放在<Book>组件内：

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

Answer 2

检查here

键仅在周围数组的上下文中有意义。

因此，密钥应位于<Book />

中的map上

Answer 3

你需要为每个孩子提供一把钥匙

所以你可以使用node-uuid

```

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}
    />
  ));
}

```

让孩子进入阵列没有关键错误

3 个答案: