Supprimer l'élément du tableau d'état dans react

L'histoire est que je devrais être capable de mettre Bob, Sally et Jack dans une boîte. Je peux également retirer l'un ou l'autre de la boîte. Lorsqu'il est 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 (onClick, etc.). La partie clé est de supprimer, supprimer, détruire "Bob" du tableau mais removePeople()ne fonctionne pas lorsqu'il est appelé. Des idées? Je regardais cela mais je fais peut-être quelque chose de mal depuis que j'utilise React.

Pour supprimer un élément d'un tableau, faites simplement:

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

Lorsque vous utilisez React, vous ne devez jamais muter 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 fait muter le tableau, il est donc préférable de ne pas l'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 
    })});
}

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

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

Utilisez .splicepour supprimer l'élément du tableau. En utilisant delete, les index du tableau ne seront pas modifiés mais la valeur de l'index spécifique seraundefined

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);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
  people.splice(index, 1);
}
console.log(people);

Éditer:

Comme l'a souligné justin-grant , en règle générale, ne jamais muter this.statedirectement, car un appel setState()après peut remplacer la mutation que vous avez faite. Traitez this.statecomme s'il était immuable.

L'alternative est de créer des copies des objets dans this.stateet de manipuler les copies, en les attribuant à nouveau à l'aide de setState(). Array#map, Array#filteretc. pourraient être utilisés.

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

Moyen facile de supprimer l'élément du tableau d'état dans react:

lorsque des données sont supprimées de la base de données et de la liste de mise à jour sans appel d'API à ce moment-là, vous transmettez l'ID supprimé à cette fonction et cette fonction supprime les fichiers supprimés enregistrés de la liste

export default class PostList extends Component {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'All Items',
        }, {
          id: 2,
          name: 'In Stock Items',
        }
      ],
    }


    remove_post_on_list = (deletePostId) => {
        this.setState({
          postList: this.state.postList.filter(item => item.post_id != deletePostId)
        })
      }
  
}

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

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

state = {
  checked_Array: []
}

Maintenant,

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

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 est préférable de l'utiliser filtercar il ne mute pas le tableau. Exemple:

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

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