在React中获取钥匙道具警告，即使钥匙已设置

Question

我收到这个警告：

警告：数组或迭代器中的每个子级都应具有唯一的“键”属性。检查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="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 = React.createClass({
  displayName: 'Event',

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

显然我在

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

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




Answer 1

我意识到这个帖子很老了，但我刚刚遇到了这个问题，这让我发疯。当我意识到我有一个

Answer 2

每次呈现列表（使用map）时，向列表元素（从map的回调返回的最顶层或“根”元素）添加一个唯一的key属性：

render() {
  return (
    <div>
      {this.props.data.map( element => {
         // Place the key on to the returned "root" element.
         // Also, in real life this should be a separate component...
         return <div key={element.id}>
           <span>Id (Name): </span>
           <span>{element.id} </span>
           <span>({element.name})</span>
         </div>;
      })}
    </div>
  )
}

官方列表和关键点文档显示了您应该如何使用列表，链接的对账文档会说明原因。

基本上，当React重新渲染一个组件时，它会运行一个差异算法，找出新版本和旧版本列表之间发生了什么变化。比较并不总是微不足道的，但是如果每个元素中都有一个唯一的键，就可以清楚地识别出发生了什么变化。参见文档中的示例：

<!-- previous -->
<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<!-- new -->    
<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

很明显，添加了一个带有键2014的新元素，因为我们拥有所有其他键，这些键没有更改。如果没有钥匙，这一切都会变得模糊不清。

从现在开始，很容易看到：

• 为什么键应该是唯一的，但只在列表中的兄弟姐妹之间是重要的，因为比较只发生在给定列表的旧元素和新元素中。
• 前一个版本和新版本之间的相同元素的键应该保持不变，否则我们会比较不同的元素，并且无法跟踪更改。这就是为什么建议使用资源的id，或者（如果没有）元素独有的其他数据，以及为什么不应该使用诸如Math.random（）之类的东西。

您应该将键属性放置到组件的约定是一种更好的做法，因为当您迭代列表并希望呈现元素时，这清楚地表明您应该将代码组织到单独的组件中。

您从文档中引用的声明：

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

这意味着如果在循环中渲染组件，则应设置循环中组件的键属性，就像在EventsTable组件中一样：

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

错误的方法是将其传递给组件，在组件上设置键：

Event = React.createClass({
  displayName: 'Event',
  render() {
    // Don't do this!
    return (
      <tr key={this.props.data.WhatId}>
        {_.keys(this.props.data).map((x) => {

本文中还有一个很好的例子。

Answer 3

您是否尝试将键添加到

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