React Warning: каждый дочерний элемент в массиве или итераторе должен иметь уникальный" ключевой " prop. Проверьте метод рендеринга ' App`

Я получаю эту ошибку, но я определяю ключ. Вот мой 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')}
                        }
                    }
                }
            }
        `,
    },
});
7
ecmascript-6 reactjs relayjs

1 ответов

самый простой способ исправить это-основать ключ от индекса карты:

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

тогда вам не нужно беспокоиться о том, насколько уникально значение edge.node.id есть. The key должен быть уникальным в контексте всех AccountTable братья и сестры. Она не должна быть глобально уникальной. Таким образом, индекс работает хорошо.

однако, если у вас есть стабильный идентификатор, основанный на объекте, это, очевидно, лучше.

7