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

Question

私はそのエラーを受けていますが、私はキーを定義しています。ここに私のApp.jsがあります。

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

はその後、あなたがedge.node.idの値がどのようにユニークな心配する必要はありません。

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

これを修正する最も簡単な方法は、マップのインデックスoffキーをベースにあります。 keyは、すべてのAccountTable兄弟のコンテキスト内で一意である必要があります。世界的にユニークである必要はありません。インデックスはうまくいきます。

しかし、オブジェクトに基づいた安定したIDを持っている場合は、明らかに優れています。