javascript - 即使设置了 key，在 React 中也会收到 key prop 警告

Question

问题

我收到此警告:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of EventsTable. See fb.me/react-warning-keys for more information.

react-runtime-dev.js?8fefd85d334323f8baa58410bac59b2a7f426ea7:21998 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Event. See fb.me/react-warning-keys for more information.

来源

这是EventsTable :

EventsTable = React.createClass({
  displayName: 'EventsTable',

  render() {
    console.dir(this.props.list);

    return (
      <table className="events-table">
        <thead>
          <tr>
            {_.keys(this.props.list[0]).map(function (key) {
              if (key !== 'attributes') {
                return <th>{key}</th>;
              }
            })}
         </tr>
        </thead>

        <tbody>
          {this.props.list.map(function (row) {
            return (
              <Event key={row.WhatId} data={row} />
            );
          })}
        </tbody>
      </table>
    )
  }
});

这是Event :

Event = React.createClass({
  displayName: 'Event',

  render() {
    return (
      <tr>
        {_.keys(this.props.data).map((x) => {
          if (x !== 'attributes')
            return <td>{this.props.data[x]}</td>;
        })}
      </tr>
    )
  }
});

问题

显然我已经得到了 key支撑<Event />成分。我遵循您应该包含 key 的约定在组件上，而不是在 HTML 本身上(换句话说，Event 组件内的 HTML 标记)。根据官方 React 文档:

The key should always be supplied directly to the components in the array, not to the container HTML child of each component in the array:

我很困惑。为什么我会收到警告？

Answer 1

当我意识到时，我最终解决了这个问题，因为我有一个 <React.Fragment>这也需要一个唯一的 key 。