web-dev-qa-db-ja.com

React警告：配列またはイテレータの各子には、一意の「キー」プロップが必要です。`App`のrenderメソッドを確認してください

エラーが発生しましたが、キーを定義しています。これが私の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')}
                        }
                    }
                }
            }
        `,
    },
});
reactjsecmascript-6relayjs
10
LoneWolfPR

これを修正する最も簡単な方法は、マップのインデックスに基づいてキーを作成することです。

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

そうすれば、Edge.node.idの値がどれほどユニークであるかを気にする必要はありません。 keyは、すべてのAccountTable兄弟のコンテキストでのみ一意である必要があります。グローバルに一意である必要はありません。したがって、インデックスは適切に機能します。

ただし、オブジェクトに基づく安定したIDがある場合は、それが明らかに優れています。

10
Davin Tryon