web-dev-qa-db-fra.com

Deux enfants avec la même clé dans React

L'application fonctionne, mes classes ajoutent vraiment un nouvel élément mais je vois ci-dessous un avertissement dans la console!

Avertissement: deux enfants rencontrés avec la même clé, [object Object]. Les clés doivent être uniques afin que les composants conservent leur identité sur toutes les mises à jour. Des clés non uniques peuvent entraîner la duplication et/ou l'omission d'enfants - le comportement n'est pas pris en charge et pourrait changer dans une future version. in div (créé par ContentBody) dans ContentBody

Voici ma partie de rendu: 

 return (
            <div ref={this.myRef} style={this.state.myHomeStyle} >
              {this.state.elements.map((i: any) => {
                console.log(">>i>>>>", i);
                return <span style={i.myStyle} key={i} >{i}</span>;
              })}
            </div>
        );

// Where i init 
 public componentDidMount() {

    console.log('componentDidMount');
    this.myDOM  = this.myRef.current;
    this.myDOM.addEventListener(myEventsList.adaptCss, this.adaptCss);

    this.add(12,this.INLINE_TEST_ELE, null);
    this.add(13,this.INLINE_TEST_ELE, null);

  }


// Function add 
private add = (id: number, content: any, event: any ) => {

    let localArr: any[] = [];
    let mEvent: any = null;

    if (event !== undefined) {
      mEvent = event;
    }

    localArr = this.state.elements;
    localArr.Push(React.createElement("div", { key: id , onClick : mEvent }, content));

    this.setState(
      {
        elements: localArr,
        visibility : true,
      },
    );

  }

Aucune suggestion?

Mise à jour: voici le lien pour mon projet de démarrage: https://github.com/zlatnaspirala/react-vs-TypeScript-starter

reactjskeyadd
11
Nikola Lukic

Vous pouvez passer un autre paramètre dans votre fonction de carte comme ceci:

this.state.elements.map((element, index) => {
   return <span style={element.myStyle} key={index} >{element}</span>;
});

Le deuxième paramètre du Array.prototype.map la fonction contient en fait l'index actuel de l'élément particulier dans ce tableau.

De cette façon, vous serez sûr que votre clé n'est pas dupliquée.

14
heyitsmarcucu

Vous passez un élément et non un index. Et si votre élément est le même, l'erreur est lancée. Pour passer l'index, utilisez le deuxième paramètre:

.map((element, index)=>

Maintenant, utiliser index vous donnera une clé différente.

3
Bhojendra Rauniyar

Voir ceci pour une meilleure compréhension des avertissements et des meilleures pratiques liés aux "clés"

 function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Visitez ce lien https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys pour plus d'informations

2
Nilanth