Elimina la voce dall'array di stati in risposta

Question

La storia è che dovrei essere in grado di mettere Bob, Sally e Jack in una scatola. Posso anche rimuovere dalla scatola. Quando viene rimosso, non rimane spazio.

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

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

["Sally", "Jack"] 

Ecco il mio reagiscono componente:

... 

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 vi mostro un codice minimo in quanto v'è di più ad esso (onClick ecc). La parte fondamentale è eliminare, rimuovere, distruggere "Bob" dall'array ma removePeople() non funziona quando viene chiamato. Qualche idea? Ero looking at this ma potrei fare qualcosa di sbagliato dal momento che sto usando React.

Answer 1

Per rimuovere un elemento da una matrice, basta fare:

array.splice(index, 1); 

Nel tuo caso:

removePeople(e) { 
    var array = this.state.people; 
    var index = array.indexOf(e.target.value) 
    array.splice(index, 1); 
    this.setState({people: array }); 
}, 

Answer 2

Quando si utilizza Reagire, si dovrebbe mai mutare direttamente lo stato. Se un oggetto (o Array, che è anche un oggetto) viene cambiato, dovresti creare una nuova copia.

Altri hanno suggerito di utilizzare Array.prototype.splice(), ma tale metodo muta l'array, quindi è meglio non utilizzarlo con React.

più semplice 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 
    })}; 
} 

Answer 3

Usa .splice per rimuovere elemento dalla matrice. Utilizzando delete, indici della matrice non siano alterati ma il valore di indice specifico sarà undefined

Il metodo splice() modifica il contenuto di un array rimuovendo elementi esistenti e/o l'aggiunta di nuovi elementi.

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

Answer 4

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 ulteriori informazioni

Answer 5

È 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 filter perché non mutare array. Esempio:

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

Answer 6

Ecco una variazione minore sulla risposta di Aleksandr Petrov utilizzando ES6

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