React Warning:数组或迭代器中的每个子节点都应该有一个唯一的"key"prop.检查`App`的渲染方法

Question

我收到了这个错误,但我正在定义一个密钥.这是我App.js的抱怨.

import React from 'react';
import Relay from 'react-relay';
import AccountTable from './AccountTable';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Account list</h1>
          {this.props.viewer.accounts.edges.map(edge =>
            <AccountTable key={edge.node.id} account={edge.node} />
          )}
      </div>
    );
  }
}

export default Relay.createContainer(App, {
    fragments: {
        viewer: () => Relay.QL`
            fragment on User {
                accounts(first: 10) {
                    edges {
                        node {
                            ${AccountTable.getFragment('account')}
                        }
                    }
                }
            }
        `,
    },
});

Answer 1

解决此问题的最简单方法是将键基于映射的索引:

{this.props.viewer.accounts.edges.map((edge, i) =>
    <AccountTable key={i} account={edge.node} />
)}

然后,您不必担心价值的独特性edge.node.id.该key只需要在所有的环境中唯一的AccountTable兄弟姐妹.它不需要是全球唯一的.所以,该指数运作良好.

但是,如果你有一个基于对象的稳定id,那显然更好.