Pourquoi mes enfants React Array ont-ils besoin de clés uniques ?

Comprendre les clés uniques pour les enfants du tableau dans React.js

Dans React, il est important d'attribuer des clés uniques aux enfants du tableau pour optimiser les performances et évitez les nouveaux rendus inutiles.

Problème :
Vous êtes réception d'une erreur indiquant : "Chaque enfant d'un tableau doit avoir un accessoire 'clé' unique" lors du rendu d'une table triable à l'aide d'une source de données JSON.

Enquête :

``

{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>);

}
});
``

Solution :
Le problème vient de l'absence de clés uniques pour le éléments rendus dans le composant TableRowItem.

Pour garantir que chaque enfant du tableau rows possède un accessoire de clé unique, vous devez également ajouter des clés aux éléments dans le composant TableRowItem.

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>);
  }
});

En ajoutant des clés uniques au champ éléments, React peut suivre des éléments individuels et effectuer des mises à jour efficaces, évitant ainsi un nouveau rendu inutile de la ligne entière.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!