Warum benötigen meine React-Array-Kinder eindeutige Schlüssel?

Eindeutige Schlüssel für Array-Kinder in React.js verstehen

In React ist es wichtig, Array-Kindern eindeutige Schlüssel zuzuweisen, um die Leistung zu optimieren und vermeiden Sie unnötiges erneutes Rendern.

Problem:
Sie sind Beim Rendern einer sortierbaren Tabelle mithilfe einer JSON-Datenquelle wird eine Fehlermeldung angezeigt, die besagt: „Jedes Kind in einem Array sollte eine eindeutige ‚Schlüssel‘-Requisite haben“.

Untersuchung:

``

{rows}

``
``
var TableRowItem = React.createClass({
render: function() {

var td = function() {
  return this.props.columns.map(function(c) {
    return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
  }, this);
}.bind(this);

return (<tr >{ td(this.props.item) }</tr>);

}
});
``

Lösung:
Das Problem ergibt sich aus dem Fehlen eindeutiger Schlüssel für das Elemente, die innerhalb der TableRowItem-Komponente gerendert werden.

Um sicherzustellen, dass jedes untergeordnete Element im Zeilenarray über eine eindeutige Schlüsselstütze verfügt, müssen Sie auch Schlüssel zu den Elementen innerhalb der TableRowItem-Komponente hinzufügen.

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
      return this.props.columns.map(function(c) {
        return <td key={this.props.key + '-' + c}>{this.props.data[c]}</td>;
      }, this);
    }.bind(this);

    return (<tr >{ td(this.props.item) }</tr>);
  }
});

Durch das Hinzufügen eindeutiger Schlüssel zum Elemente kann React einzelne Elemente verfolgen und effiziente Aktualisierungen durchführen, wodurch ein unnötiges erneutes Rendern der gesamten Zeile verhindert wird.

Das obige ist der detaillierte Inhalt vonWarum benötigen meine React-Array-Kinder eindeutige Schlüssel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!