wake-up-neo.net

Reaktion Warnung: flattenChildren (...): Begegnung mit zwei Kindern mit demselben Schlüssel

Könnte bitte jemand erklären, wie dieser Fehler behoben werden kann 

Warnung: flattenChildren (...): Begegnung mit zwei Kindern mit demselben Schlüssel

Ich habe meinen Code unten repliziert, aber aus irgendeinem Grund zeigt CodePen den Fehler nicht an.

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

Als sekundäre Frage bin ich ziemlich sicher, dass mein Reset die Werte der Auswahlfelder zurücksetzen soll. Dies funktioniert jedoch auch nicht, und es werden nur die gerenderten Ergebnisse zurückgesetzt.

Jede Hilfe sehr geschätzt

16
Chris O

Durch Hinzufügen des Index als Wert wurde dieses Problem behoben. Danke @azium für deine sugegstion.

  <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

Es ist keine gute Idee, den Index als Schlüssel zu verwenden. Ein Schlüssel ist das einzige, was React zur Identifizierung von DOM-Elementen verwendet. Was passiert, wenn Sie ein Element in die Liste verschieben oder etwas in der Mitte entfernen? Wenn der Schlüssel derselbe ist wie zuvor, geht React davon aus, dass das DOM-Element dieselbe Komponente wie zuvor darstellt. Das stimmt aber nicht mehr. Von: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Es ist viel besser, eine eindeutige Zeichenfolge aus jedem Element zu verwenden, das Sie als Schlüssel verwenden. Etwas wie <option key={value.id}> oder wenn kein Schlüssel vorhanden ist, erstellen Sie einen eindeutigen Bezeichner, indem Sie etwas wie <option key={value.name + value.description}> tun.

22
Matt Hamil

Ich bin ein großer Fan von key, indem ich Index mit einem konstanten Wert kombiniere, anstatt key={value.name + value.description}:

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

Das liegt daran, dass ich den Schlüssel wissentlich weitergeben kann, für welchen Bestandteil er es ist. Für zB <ComponentA key={'compoent-a-'+i} />. Ich folge diesem Ansatz auch, weil einfache HTML-Konventionen übereinstimmen, wie wir id="my-some-of-the-id" oder etwas geben.

Auch wenn Sie Name und Beschreibung als Schlüssel verwenden möchten, können Sie eher Folgendes verwenden:

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

Dies ist nur eine Meinung. Allerdings folge ich der HTML-Konvention beim Schreiben von Requisiten.

0