Comment puis-je résoudre "Avertissement: J'ai rencontré deux enfants avec la même clé" sur React.js

Eh bien, c'est une propriété ReactJS , lorsque vous mappez sur un tableau pour créer une liste de composants (comme vous "faites sur vos pages / main / index.js pour générer h2) votre clé doit être unique, et je pense que là vous" récupérer un film 2 fois (ou plus) ce qui rend la clé non unique (car vous utilisez le nom du film comme clé), donc pour éviter le problème, essayez d'utiliser l'index de boucle de carte à la place, c'est mieux.

{this.state.movies.map(( movie , index )  => (
          <h2 key={index}>{movie.title}</h2>
))}

Changement

<h2 key={movie.event.id}>{movie.event.title}</h2>

à

<h2 key={movie.id}>{movie.title}</h2>

Explication:

React attend une clé unique pour chaque ligne d'un composant de type liste. Il utilise cette clé pour déterminer ce qui a changé depuis le dernier rendu. Sinon, la façon dont la liste a changé pourrait être ambiguë.

movie.toString() n'était pas unique. Il évaluait à "[object Object]" pour chaque ligne.

En regardant l'API que vous appelez, vous devrez peut-être faire quelque chose de plus comme ceci:

<h2 key={movie.toString()}>{movie.title}</h2>

Si vous affichez une liste dans react, chaque composant doit avoir un identifiant unique comme clé.

Dans vos pages -> main -> index.js

Tu as ceci

{this.state.movies.map(movie => {
      return <h2 key={movie.toString()}>{movie.title}</h2>;
    })}

Ici, vous devez passer quelque chose d'unique à key au lieu de movie.toString() .

En savoir plus sur les clés ici

mettre en flatlist

 keyExtractor={(item, index) => String(index)}

ou

listKey={(item, index) => 'index' + index.toString()}

Le problème Lorsque vous effectuez le rendu des composants React dans une fonction de carte à l'intérieur de la fonction de rendu, vous devez fournir un accessoire clé à chaque composant qui est unique, sinon React mettra un avertissement dans la console et pourrait ou non mettre à jour correctement votre composant lorsqu'il rediffuseurs. L'une des erreurs les plus courantes consiste à utiliser un objet comme clé. Un objet sera stringifié par React dans [object Object] indépendamment des spécificités de l'objet que vous avez passé. Donc, deux objets complètement différents auront la même clé. Si cela se produit, vous verrez quelque chose comme un avertissement comme celui-ci dans la console:

Attention: rencontre de deux enfants avec la même clé, [object Object]. Les clés doivent être uniques afin que les composants conservent leur identité à travers les mises à jour. Les clés non uniques peuvent entraîner la duplication et / ou l'omission des enfants - le comportement n'est pas pris en charge et pourrait changer dans une version ultérieure.

render() {
return (
    <div>
        {this.state.users.map((user, idx) => (
            <UserComponent user={user} key={user.id} />
        ))}
    </div>
)

}

Une autre erreur courante consiste à utiliser des index de tableau pour les clés.

render() {
return (
    <div>
        {this.state.users.map((user, idx) => (
            <UserComponent user={user} key={idx} />
        ))}
    </div>
)

}

La solution Un accessoire clé doit être unique, stable et reproductible.

Unique: la clé d'un élément doit être unique parmi ses frères et sœurs. La clé n'a pas besoin d'être unique au monde. C'est le problème de l'utilisation de l'objet pour une clé, car la forme de chaîne de n'importe quel objet est toujours la même.

Stable: la clé d'un certain élément doit toujours être la même. C'est pourquoi l'utilisation des index de tableau peut provoquer des erreurs. Si l'utilisateur ABC est à l'index 0, puis est déplacé vers l'index 1, le composant ne sera pas renvoyé car les clés sont identiques, même si les données connectées à ces clés ont changé.

Reproductible: il devrait toujours être possible d'obtenir la même clé pour l'objet à chaque fois. Généralement, cela signifie ne pas utiliser de valeurs aléatoires pour les clés.

La meilleure pratique dans des situations comme celle-ci consiste à utiliser l'ID unique qui soutient vos objets. Dans cet exemple, l'ID de l'utilisateur qui aurait été stocké dans la base de données. Cependant, il est possible d'utiliser d'autres fonctions de hachage pour obtenir des résultats similaires.

render() {
return (
    <div>
        {this.state.users.map(user => (
            <UserComponent user={user} key={user} />
        ))}
    </div>
)

}

https://sentry.io/answers/defining-proper-key-in-props/