Suppression d'un élément du tableau dans l'état du composant

J'essaie de trouver le meilleur moyen de supprimer un élément d'un tableau dans l'état d'un composant. Puisque je ne devrais pas modifier la this.statevariable directement, y a-t-il un meilleur moyen (plus concis) de supprimer un élément d'un tableau que ce que j'ai ici?:

  onRemovePerson: function(index) {
    this.setState(prevState => { // pass callback in setState to avoid race condition
      let newData = prevState.data.slice() //copy array from prevState
      newData.splice(index, 1) // remove element
      return {data: newData} // update state
    })
  },

Je vous remercie.

actualisé

Cela a été mis à jour pour utiliser le rappel dans setState. Cela doit être fait lors du référencement de l'état actuel lors de sa mise à jour.

La façon la plus propre de faire cela que j'ai vue est avec filter:

removeItem(index) {
  this.setState({
    data: this.state.data.filter((_, i) => i !== index)
  });
}

Vous pouvez utiliser l' update()assistant d'immuabilité dereact-addons-update , qui fait effectivement la même chose sous le capot, mais ce que vous faites est bien.

this.setState(prevState => ({
  data: update(prevState.data, {$splice: [[index, 1]]})
}))

Je crois référencer this.state intérieur de setState()est déconseillé (les mises à jour d'état peuvent être asynchrones ).

La documentation recommande d'utiliser setState()avec une fonction de rappel afin que prevState soit transmis au moment de l'exécution lorsque la mise à jour se produit. Voici donc à quoi cela ressemblerait:

Utilisation de Array.prototype.filter sans ES6

removeItem : function(index) {
  this.setState(function(prevState){
    return { data : prevState.data.filter(function(val, i) {
      return i !== index;
    })};
  });
}

Utilisation de Array.prototype.filter avec les fonctions fléchées ES6

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i !== index)
  }));
}

Utiliser immutability-helper

import update from 'immutability-helper'
...
removeItem(index) {
  this.setState((prevState) => ({
    data: update(prevState.data, {$splice: [[index, 1]]})
  }))
}

Utiliser Spread

function removeItem(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

Notez que dans chaque instance, quelle que soit la technique utilisée, this.setState()est passé un rappel, pas une référence d'objet à l'ancien this.state;

Voici un moyen de supprimer l'élément du tableau dans l'état à l'aide de la syntaxe de propagation ES6.

onRemovePerson: (index) => {
  const data = this.state.data;
  this.setState({ 
    data: [...data.slice(0,index), ...data.slice(index+1)]
  });
}

Je souhaite intervenir ici même si cette question a déjà reçu une réponse correcte de @pscl au cas où quelqu'un d'autre rencontrerait le même problème que moi. Sur les 4 méthodes proposées, j'ai choisi d'utiliser la syntaxe es6 avec des fonctions fléchées en raison de sa concision et du manque de dépendance vis-à-vis des bibliothèques externes:

Utilisation de Array.prototype.filter avec les fonctions fléchées ES6

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i != index)
  }));
}

Comme vous pouvez le voir, j'ai fait une légère modification pour ignorer le type d'index ( !==à!= ) car dans mon cas, je récupérais l'index à partir d'un champ de chaîne.

Un autre point utile si vous constatez un comportement étrange lors de la suppression d'un élément côté client est de NE JAMAIS utiliser l'index d'un tableau comme clé de l'élément :

// bad
{content.map((content, index) =>
  <p key={index}>{content.Content}</p>
)}

Lorsque React diffère avec le DOM virtuel lors d'un changement, il examinera les clés pour déterminer ce qui a changé. Donc, si vous utilisez des index et qu'il y en a un de moins dans le tableau, cela supprimera le dernier. Utilisez plutôt les identifiants du contenu comme clés, comme ceci.

// good
{content.map(content =>
  <p key={content.id}>{content.Content}</p>
)}

Ce qui précède est un extrait de cette réponse d'un article connexe .

Bon codage à tous!

Vous pouvez utiliser cette fonction, si vous souhaitez supprimer l'élément (sans index)

removeItem(item) {
  this.setState(prevState => {
    data: prevState.data.filter(i => i !== item)
  });
}

Comme mentionné dans un commentaire à la réponse d'Ephrion ci-dessus, filter () peut être lent, en particulier avec de grands tableaux, car il effectue une boucle pour rechercher un index qui semble déjà avoir été déterminé. C'est une solution propre mais inefficace.

Comme alternative, on peut simplement «découper» l'élément souhaité et concaténer les fragments.

var dummyArray = [];    
this.setState({data: dummyArray.concat(this.state.data.slice(0, index), this.state.data.slice(index))})

J'espère que cela t'aides!

Vous pouvez rendre le code plus lisible avec une fonction d'assistance d'une ligne:

const removeElement = (arr, i) => [...arr.slice(0, i), ...arr.slice(i+1)];

puis utilisez-le comme ceci:

this.setState(state => ({ places: removeElement(state.places, index) }));

Juste une suggestion, dans votre code au lieu d'utiliser, let newData = prevState.datavous pouvez utiliser spread qui est introduit dans ES6 que vous pouvez utiliserlet newData = ...prevState.data pour copier un tableau

Trois points ... représentent les opérateurs de propagation ou les paramètres de repos ,

Il permet à une expression de tableau, à une chaîne ou à tout ce qui peut être itératif d'être développé à des endroits où zéro ou plusieurs arguments pour les appels de fonction ou des éléments pour le tableau sont attendus.

De plus, vous pouvez supprimer l'élément du tableau avec les éléments suivants

onRemovePerson: function(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

J'espère que cela contribue !!

Voici un moyen simple de le faire:

removeFunction(key){
  const data = {...this.state.data}; //Duplicate state.
  delete data[key];                  //remove Item form stateCopy.
  this.setState({data});             //Set state as the modify one.
}

J'espère que ça aide!!!