Ostrzeżenie o reakcji: Każde dziecko w tablicy lub iteratorze powinno mieć unikalny "klucz". Sprawdź metodę renderowania "App"

Question

Otrzymuję ten błąd, ale definiuję klucz. Oto mój App.js, na który narzeka.

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

Najprostszym sposobem, aby rozwiązać ten jest oparcie klucz z indeksem mapie:

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

Wtedy nie trzeba się martwić o tym, jak wyjątkowa wartość edge.node.id jest. Numer key musi być unikalny tylko w kontekście wszystkich rodzeństwa AccountTable. Nie musi być globalnie wyjątkowy. Indeks działa więc dobrze.

Jednakże, jeśli masz stabilny identyfikator, który jest oparty na obiekcie, jest to oczywiście lepsze.