web-dev-qa-db-fra.com

React Warning: flattenChildren (...): Deux enfants rencontrés avec la même clé

Quelqu'un pourrait-il s'il vous plaît expliquer comment résoudre cette erreur 

Attention: flattenChildren (...): Rencontré deux enfants avec le même clé

J'ai reproduit mon code ci-dessous, mais pour une raison quelconque, CodePen n'affiche pas l'erreur.

var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},

render: function() {

return (
  <div className="filter-options">
    <div className="filter-option">
      <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
      <option value=''>Product</option>
      {this.props.productOptions.map(function(option) {
        return (<option key={option}  value={option}>{option}</option>)
      })}
      </select>
  </div>
  </div>
 );
 }
 });

Codepen

En tant que question secondaire, je suis à peu près sûr que ma réinitialisation est supposée réinitialiser les valeurs des zones de sélection, mais cela ne fonctionne également pas et ne fait que réinitialiser les résultats obtenus - vous ne savez pas si cela est lié au premier problème?

Toute aide très appréciée

javascriptreactjsselectoption
16
Chris O

L'ajout de l'index en tant que valeur a résolu ce problème. Merci @azium pour votre suggestion.

  <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
      <option value=''>Product</option>
      {this.props.productOptions.map(function(option, value) {
        return (<option key={value}  value={option}>{option}</option>)
      })}
      </select>
10
Chris O

Ce n'est pas une bonne idée d'utiliser l'index comme clé. Une clé est la seule chose que React utilise pour identifier les éléments DOM. Que se passe-t-il si vous insérez un élément dans la liste ou supprimez quelque chose au milieu? Si la clé est la même que précédemment, React suppose que l'élément DOM représente le même composant qu'auparavant. Mais ce n'est plus vrai. De: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Il est préférable d'utiliser une chaîne unique de chaque élément sur lequel vous mappez en tant que clé. Quelque chose comme <option key={value.id}> ou si une clé n'existe pas, créez un identifiant unique en faisant quelque chose comme <option key={value.name + value.description}>.

22
Matt Hamil

Je suis un grand fan de l'utilisation de la clé en combinant l'index avec une valeur constante plutôt que d'utiliser key={value.name + value.description}:

key={'some-constant-value'+index}

C’est parce que je peux transmettre la clé en toute connaissance de cause. Pour par exemple. <ComponentA key={'compoent-a-'+i} />. En outre, je suis cette approche parce que la convention html simple correspond comme nous donnons id="my-some-of-the-id" ou quelque chose.

Donc, même si vous voulez utiliser le nom et la description comme clé, vous pouvez utiliser comme ceci plutôt:

key={'some-constant-'+value.name+'-'+value.description}

Ceci est juste un avis. Bien que je suive la convention html lors de l’écriture de la valeur des accessoires.

0
Bhojendra Rauniyar