Réagir Avertissement: Chaque enfant dans un tableau ou un itérateur doit avoir une “clé” prop. Vérifier la méthode de rendu de `App`

J'obtiens cette erreur, mais je suis à la définition d'une clé. Voici mon App.js que c'est de se plaindre.

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')}
                        }
                    }
                }
            }
        `,
    },
});
bob ross serait fier de votre code montagnes. Mais vraiment, vous devriez vérifier le caractère unique de votre bord.nœud.id.
ne l'habitude des contrôles d'intégrité, je suppose. Est le code ci-dessus de 100% de la source de l'erreur? sont les id réellement unique? peut-être que vous avez un couple de undefineds / null
Voir si vous avez des Id en double: console.log(this.props.viewer.accounts.edges.map(edge => edge.node.id))
Ainsi, il s'avère que le bord.nœud d'objet n'est pas un id défini à ce stade. Je pense que c'est parce que le nœud fait référence à un autre fragment. Je n'avais pas ce problème quand j'ai eu des comptes à seulement énoncée à l'intérieur de ce fragment. Cela montre quand je me suis cassé le compte graphql des trucs dans le fragment. Ne l'un de vous sais un travail autour?

OriginalL'auteur LoneWolfPR | 2016-12-16

  1. 9

    La façon la plus simple pour corriger ce qui est à la base de la clé de l'index de la carte:

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

    Ensuite, vous n'avez pas à vous soucier de la façon unique la valeur de edge.node.id est. Le key ne doit être unique dans le contexte de tous les AccountTable frères et sœurs. Il n'a pas besoin d'être unique au monde. Ainsi, l'index fonctionne bien.

    Toutefois, si vous avez une bonne id qui est basé hors de l'objet, c'est évidemment mieux.

    Selon la réagir la documentation: "Quand vous n'avez pas stable Id pour le rendu des éléments, vous pouvez utiliser l'index de l'élément clé, comme un dernier recours". Donc, j'aimerais assurez-vous que il n'y a aucun moyen d'obtenir un stable id avant de me le faire. Toutes les suggestions sur ce front, ou est-ce tout simplement pas possible parce que mon nœud fait référence à une autre fragment?
    Eh bien, sauf si vous avez une autre id, ce pourrait être votre "dernier recours", à droite?
    Certainement, cela résout le problème. Je vais faire un peu plus de creuser, mais si je ne peux pas trouver un moyen pour obtenir l'id de l'objet que je vais marquer ce que la solution. Merci!
    Si vous utilisez l'élément à l'index de la clé, il peut ne pas fonctionner dans les cas où le tableau est re-commandé: stackoverflow.com/a/43892905/960857

    OriginalL'auteur Davin Tryon