Problem

我收到这样的警告:

警告:数组或迭代器中的每个子级都应该有一个唯一的"键"属性.判断EventsTable的渲染方法.更多信息请参见fb.me/react-warning-keys.

react-runtime-dev.js？8fefd85d334323f8baa58410bac59b2a7f426ea7:21998警告:数组或迭代器中的每个子级都应具有唯一的"键"属性.判断事件的渲染方法.更多信息请参见fb.me/react-warning-keys.

来源

这是EventsTable:

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

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

    return (
      <table className="eventlayui-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>
    )
  }
});

问题

很明显，我在<Event />组件上有keyprops .我遵循的惯例是，组件中应该包含key，而不是HTML本身(换句话说，Event组件中的HTML标记).根据官方文件:

密钥应始终直接提供给数组中的组件，而不是数组中每个组件的容器HTML子级:

我非常困惑.为什么我会收到警告？