Réagir clé unique lors de la cartographie d'avertissement

Question

Je suis assez nouveau pour réagir et je suis confronté à un problème que je ne peux pas résoudre. Voici mon composant réagir:

import React from 'react'; 
import Header from './Header'; 
import ContestPreview from './ContestPreview'; 

class App extends React.Component { 

    state = { 
     pageHeader: 'Naming Contests', 
     whatever: 'test' 
    }; 

    render() { 
     return (
      <div className="App"> 
       <Header message={this.state.pageHeader} /> 
       <div> 
        {this.props.contests.map(contest => 
         <ContestPreview key={contest.id} {...contest} /> 
        )} 
       </div> 
      </div> 
     ); 
    } 
} 

export default App; 

Ce code me donne l'avertissement suivant:

Attention: Chaque enfant dans un tableau ou iterator devrait avoir un accessoire « clé » unique . Vérifiez la méthode de rendu de App. Voir ICI-FB-URL-I-REMOVED pour plus d'informations. dans ContestPreview (créé par App) dans l'App

Je comprends tout à fait ce que cela signifie erreur. Je comprends que chaque élément d'un tableau doit avoir une clé unique lorsque vous les bouclez en boucle. Qu'est-ce que je ne comprends pas pourquoi je reçois l'erreur, puisque dans mon opionion la clé devrait être définie avec mon <ContestPreview key={contest.id} {...contest} /> ... est key={contest.id} pas assez?

Voici mes données concours:

{ 
    "contests": [ 
    { 
     "id": 1, 
     "categoryName": "Business/Company", 
     "contestName": "Cognitive Building Bricks" 
    }, 
    { 
     "id": 2, 
     "categoryName": "Magazine/Newsletter", 
     "contestName": "Educating people about sustainable food production" 
    }, 
    { 
     "id": 3, 
     "categoryName": "Software Component", 
     "contestName": "Big Data Analytics for Cash Circulation" 
    }, 
    { 
     "id": 4, 
     "categoryName": "Website", 
     "contestName": "Free programming books" 
    } 
    ] 
} 

Dans mon opionion il devrait fonctionner, je ne comprends pas pourquoi je reçois toujours cette erreur. Je voudrais vraiment obtenir de l'aide sur mon problème, ce serait vraiment cool si quelqu'un peut m'expliquer ce qui se passe ici puisque j'essaie vraiment de comprendre comment cela fonctionne.

Nous vous remercions de votre aide! :)

Answer 1

Dans votre code ici

<div className="App"> 
    <Header message={this.state.pageHeader} /> 
    <div> 
     {this.props.contests.map(contest => { 
      console.log('contest id =', contest.id); 
      return (<ContestPreview key={contest.id} {...contest} />); 
     })} 
    </div> 
</div> 

Cela consolera l'id (clé) de chaque composant, que vous êtes rendu dans votre carte. Je pense que pour une raison quelconque dans votre tableau d'objet, vous avez un objet qui a la même clé.

De cette façon, lorsque vous voyez les résultats de console.log(). Vous saurez où dans votre objet vous avez l'erreur. J'espère que cela vous aidera dans le débogage de votre erreur.

Answer 2

Placer un wrapper sur le rendu des propriétés de chaque objet.

<div> 
    {this.props.contests.map(contest => 
     <div key={contest.id}> 
      <ContestPreview {...contest} /> 
     </div> 
    )} 
</div> 

Answer 3

Je peux penser à deux solutions de contournement ...

La première façon serait d'ajouter la clé d'une div entourant au lieu de directement sur l'élément ContestPreview.

<div> 
    {this.props.contests.map(contest => 
    <div key={contest.id}><ContestPreview {...contest} /></div> 
)} 
</div> 

deuxième façon serait de modifier ContestPreview afin qu'il utilise en fait l'accessoire key.

render(){ 
    <div key={this.props.key}> 
    ... 
    </div> 
}