React'teki durum dizisinden öğeyi sil

Hikaye şu ki, Bob, Sally ve Jack'i bir kutuya koyabilmeliyim. İkisini de kutudan çıkarabilirim. Çıkarıldığında yuva kalmaz.

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

Şimdi kaldırmam gerekiyor, "Bob" deyin. Yeni dizi şöyle olacaktır:

["Sally", "Jack"]

İşte benim tepki bileşenim:

...

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

...

Burada daha fazlası olduğu için size minimal bir kod gösteriyorum (onClick vb.). Anahtar kısım, diziden "Bob" u silmek, kaldırmak, yok etmektir, ancak removePeople()çağrıldığında çalışmaz. Herhangi bir fikir? Buna bakıyordum ama React'i kullandığım için yanlış bir şeyler yapıyor olabilirim.

Bir diziden bir öğeyi kaldırmak için yapmanız gereken:

array.splice(index, 1);

Senin durumunda:

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

React'i kullanırken, durumu asla doğrudan değiştirmemelisiniz. Bir nesne (veya bir nesne Arrayolan) değiştirilirse, yeni bir kopya oluşturmalısınız.

Başkaları kullanmayı önerdi Array.prototype.splice(), ancak bu yöntem Array'i değiştiriyor, bu yüzden splice()React ile kullanmamak daha iyidir .

Array.prototype.filter()Yeni bir dizi oluşturmak için kullanımı en kolay :

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

Aleksandr Petrov'un ES6 kullanarak verdiği cevabın küçük bir varyasyonu.

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

.spliceÖğeyi diziden kaldırmak için kullanın . Kullanıldığında delete, dizinin dizinleri değiştirilmeyecek ancak belirli dizinin değeriundefined

Ek yeri () metodu varolan öğeleri çıkarılması ve / veya yeni elemanları eklenerek bir dizi içeriğini değiştirir.

Sözdizimi: 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);

Düzenle:

Justin-Grant'in belirttiği gibi , Genel bir kural olarak, Aslathis.state doğrudan mutasyon yapmayın , çünkü setState()sonradan çağırmak yaptığınız mutasyonun yerini alabilir. this.stateDeğişmezmiş gibi davranın .

Alternatifi, nesnelerin kopyalarını oluşturmak this.stateve kopyaları işleyerek, bunları kullanarak geri atamaktır setState(). Array#map, Array#filterVb kullanılabilir.

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

Tepki sırasında durum dizisinden Öğeyi Silmenin Kolay Yolu:

Veritabanından herhangi bir veri silindiğinde ve API çağrısı olmadan listeyi güncellediğinde, bu işleve silinen kimliği iletirsiniz ve bu işlev, silinmiş kaydedilenleri listeden kaldırır

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

Chance Smith'in dediği gibi diziyi mutasyona uğratan 'splice' kullanılarak bahsedilen bazı cevaplar. Orijinal dizinin bir kopyasını oluşturan 'dilim' Yöntem çağrısını ('dilim' için belge burada) kullanmanızı öneririm .

Çok Basit Önce Bir Değer Tanımlayın

state = {
  checked_Array: []
}

Şimdi,

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

Kullanmayı unuttun setState. Misal:

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

Ancak, filterdiziyi değiştirmediği için kullanmak daha iyidir . Misal:

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 fazla bilgi için