Elimina l'elemento dall'array di stato in react

La storia è che dovrei riuscire a mettere Bob, Sally e Jack in una scatola. Posso anche rimuoverli dalla scatola. Quando viene rimosso, non viene lasciato alcuno slot.

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

Ora devo rimuovere, ad esempio, "Bob". Il nuovo array sarebbe:

["Sally", "Jack"]

Ecco il mio componente di reazione:

...

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

...

Qui ti mostro un codice minimo poiché c'è di più (onClick ecc.). La parte fondamentale è eliminare, rimuovere, distruggere "Bob" dall'array ma removePeople()non funziona quando viene chiamato. Qualche idea? Stavo guardando questo, ma potrei fare qualcosa di sbagliato poiché sto usando React.

Per rimuovere un elemento da un array, basta fare:

array.splice(index, 1);

Nel tuo caso:

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

Quando usi React, non dovresti mai modificare lo stato direttamente. Se un oggetto (o Array, che è anche un oggetto) viene modificato, dovresti crearne una nuova copia.

Altri hanno suggerito di usarlo Array.prototype.splice(), ma quel metodo cambia Array, quindi è meglio non usarlo splice()con React.

Più facile da usare Array.prototype.filter()per creare un nuovo array:

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

Ecco una piccola variazione sulla risposta di Aleksandr Petrov utilizzando ES6

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

Utilizzare .spliceper rimuovere l'elemento dall'array. Utilizzando delete, gli indici dell'array non verranno modificati ma il valore dell'indice specifico lo saràundefined

Il metodo splice () cambia il contenuto di un array rimuovendo gli elementi esistenti e / o aggiungendo nuovi elementi.

Sintassi: 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);

Modificare:

Come sottolineato da Justin-Grant , come regola generale, non mutare maithis.state direttamente, poiché la chiamata setState()successiva potrebbe sostituire la mutazione che hai fatto. Trattalo this.statecome se fosse immutabile.

L'alternativa è creare copie degli oggetti this.statee manipolarle, riassegnandole usando setState(). Array#map, Array#filterecc. potrebbero essere utilizzati.

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

Modo semplice per eliminare l'elemento dall'array di stato in React:

quando i dati vengono eliminati dal database e dall'elenco di aggiornamento senza chiamata API quella volta che si passa l'ID cancellato a questa funzione e questa funzione rimuove i dati cancellati dall'elenco

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

Alcune risposte hanno menzionato l'uso di "splice", che ha modificato l'array, come detto da Chance Smith. Ti suggerisco di usare la chiamata al metodo "slice" (il documento per "slice" è qui) che fa una copia dell'array originale.

È molto semplice prima di definire un valore

state = {
  checked_Array: []
}

Adesso,

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

Hai dimenticato di usare setState. Esempio:

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

Ma è meglio usare filterperché non muta l'array. Esempio:

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 per maggiori informazioni