web-dev-qa-db-fra.com

Supprimer un élément du tableau d'état dans réagit

L’histoire est la suivante: je devrais pouvoir mettre Bob, Sally et Jack dans une boîte. Je peux aussi retirer l'un ou l'autre de la boîte. Une fois retiré, aucun emplacement n'est laissé.

people = ["Bob", "Sally", "Jack"]

Je dois maintenant supprimer, disons, "Bob". Le nouveau tableau serait:

["Sally", "Jack"]

Voici mon composant de réaction:

...

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

...

Ici, je vous montre un code minimal car il y a plus que cela (onClick, etc.). La clé consiste à supprimer, supprimer, détruire "Bob" du tableau, mais removePeople() ne fonctionne pas lorsqu'il est appelé. Des idées? J'étais regardant cela mais je risque de faire quelque chose de mal puisque j'utilise React.

javascriptarraysreactjs
54
Sylar

Pour supprimer un élément d'un tableau, procédez comme suit:

array.splice(index, 1);

Dans ton cas:

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},
66
MarcoS

Lors de l'utilisation de React, vous ne devez jamais modifier l'état directement. Si un objet (ou Array, qui est également un objet) est modifié, vous devez créer une nouvelle copie.

D'autres ont suggéré d'utiliser Array.prototype.splice(), mais cette méthode mutant le tableau, il est donc préférable de ne pas utiliser splice() avec React. 

Le plus simple à utiliser Array.prototype.filter() pour créer un nouveau tableau:

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}
90
iaretiga

Voici une variation mineure de la réponse d'Aleksandr Petrov utilisant ES6

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}
15
Dmitry

Utilisez .splice pour supprimer un élément du tableau. En utilisant delete, les index du tableau ne seront pas modifiés mais la valeur de l'index spécifique sera undefined

La méthode splice () modifie le contenu d'un tableau en supprimant des éléments existants et/ou en ajoutant de nouveaux éléments.

Syntaxe:array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
people.splice(index, 1);
console.log(people);

7
Rayon

C'est très simple D'abord, vous définissez une valeur  

state=

    {
     checked_Array:[]
    }

À présent, 

fun(index)

    {
       var checked = this.state.checked_Array;
                var values = checked.indexOf(index)
                checked.splice(values, 1);
                this.setState({checked_Array: checked});
                 console.log(this.state.checked_Array)
     }
0
QC innodel
remove_post_on_list = (deletePostId) => {
    this.setState({
      postList: this.state.postList.filter(item => item.post_id != deletePostId)
    })
  }
0
ANKIT-DETROJA
   removePeople(e){
    var array = this.state.people;
    var index = array.indexOf(e.target.value); // Let's say it's Bob.
   array.splice(index,1);
  }

Redfer doc pour plus d'informations

0
Gops AB

Vous avez oublié d'utiliser setState. Exemple: 

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
  this.setState({
    people: array
  })
},

Mais il vaut mieux utiliser filter car cela ne mute pas array . Exemple:

removePeople(e){
  var array = this.state.people.filter(function(item) {
    return item !== e.target.value
  });
  this.setState({
    people: array
  })
},
0
Aleksandr Petrov

Certaines réponses ont mentionné l'utilisation de 'splice', ce qui a permis à Chance Smith de modifier le tableau. Je vous suggère d'utiliser l'appel de méthode 'slice' (le document pour 'slice' est ici) qui fait une copie du tableau d'origine.

0
user4715179