Réagissez JS: comment supprimer correctement un élément de this.state.data où data est un tableau d'objets

J'ai un composant qui génère un tableau avec des lignes de données (<tr> etc.) basé sur un réseau de données récupérées via un appel AJAX. Tout fonctionne bien pour l'édition et l'ajout de données, mais je ne suis pas en mesure de déterminer comment faire un distinct copie du tableau (avec copies distinctes des objets contenus par val, pas par ref), de sorte que lorsque je supprime la ligne spécifiée de données, la ligne applicable est supprimé de la table.

Actuellement, parce que les objets contenus sont par ref, même quand je fais une copie du tableau, ma table a la dernière ligne supprimée (même si la ligne de données et d'index est bien référencé et à la suppression de mon appel AJAX).

handleRowDelete: function(rowIdx) {
     //Correct row 
     var row = this.state.data[rowIdx];

     //This makes a new array, but the contained objects are still by ref
     var rows = this.state.data.slice();

     //This contains the proper row that will be deleted. If this array is set to data, the table is updated to reflect just the one row - as expected.
     var throwout = rows.splice(rowIdx, 1);
     console.log(throwout);

     //Whether I set via the React.addons: 
     var newState = React.addons.update(this.state, {
         data: { $set: rows }
     });
     this.setState(newState);

     //Or just set the state again via this.setState(...)
     //this.setState({data: rows, add: false});

     //It always just removes the last row in the component render
     //Even though the proper row gets deleted following in AJAX call
     $.ajax({
     ...
},
...

Je comprends Réagir ne peut pas faire une bonne diff de sorte que le rendu n'est pas déclenché, alors pouvez-vous me montrer comment cela devrait être géré?

Mise à JOUR. Pertinentes de la boucle:

var Grid = React.createClass({
    propTypes: {
        data: React.PropTypes.array.isRequired,
        onCellChange: React.PropTypes.func.isRequired,
        onRowCommit: React.PropTypes.func.isRequired
    },
    render: function() {
        var rows = this.props.data.map(function(rowData, index) {
            return <Row key={index} data={rowData} onCellChange={this.props.onCellChange.bind(null, index)} onRowCommit={this.props.onRowCommit.bind(null, index)} onRowDelete={this.props.onRowDelete.bind(null, index)} />;
        }, this);

        return (
            <Table striped bordered hover responsive>
              <thead>
              <tr>
                <th className="col-sm-4">Order Subtotal (up to)</th>
                <th className="col-sm-2">Canada</th>
                <th className="col-sm-2">US</th>
                <th className="col-sm-2">International</th>
                <th className="col-sm-1"></th>
              </tr>
              </thead>
              <tbody>
                    {rows}
              </tbody>
            </Table>  
        );
    }
});

source d'informationauteur Ted

  1. 14

    Vous aurez besoin pour vous assurer que le key valeur reste constante pendant toute la durée de l'instance de l'objet. Comme vous l'avez codé, le key valeur est basée sur la index dans le Array. Si vous supprimez un élément de l' Arrayles index sont mis à jour, et donc seraient les clés. Et, en conséquence, un objet key allait changer, et de Réagir apparaît de ne pas appliquer correctement la nouvelle matrice de changements (même lorsque le sous-jacent tableau a changé).

    Vous aurez besoin d'utiliser une valeur unique de chaque instance de l'objet que l'keyou encore créer artificiellement (suffit d'attribuer un numéro unique à chaque objet).

  2. 1

    Utilisation de la clé unique est dans Objets de Données comme ci-dessous.

    data = [
  {
    id: 0,
    contents: 'data 0',
  },
  {
    id: 3,
    contents: 'data 3',
  },
  {
    id: 4,
    contents: 'data 4',
  },
];


var rows = this.props.data.map(function(rowData, index) {
            return <Row key={rowData.id} data={rowData} onRowDelete={this.props.onRowDelete.bind(null, index)} />;
          }, this);

    Réagir, de ne pas re-rendre le composant a la même clé que celle d'avant.