Hapus item dari array negara dalam bereaksi

Ceritanya, saya harus bisa memasukkan Bob, Sally dan Jack ke dalam sebuah kotak. Saya juga dapat menghapus keduanya dari kotak. Saat dilepas, tidak ada slot yang tersisa.

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

Sekarang saya perlu menghapus, katakan, "Bob". Array baru akan menjadi:

["Sally", "Jack"]

Inilah komponen react saya:

...

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

...

Di sini saya menunjukkan kepada Anda kode minimal karena ada lebih dari itu (onClick dll). Bagian kuncinya adalah menghapus, membuang, menghancurkan "Bob" dari larik tetapi removePeople()tidak berfungsi saat dipanggil. Ada ide? Saya melihat ini tetapi saya mungkin melakukan sesuatu yang salah karena saya menggunakan React.

Untuk menghapus elemen dari array, lakukan saja:

array.splice(index, 1);

Dalam kasus Anda:

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

Saat menggunakan React, Anda tidak boleh mengubah status secara langsung. Jika sebuah objek (atau Array, yang juga merupakan objek) diubah, Anda harus membuat salinan baru.

Orang lain menyarankan untuk menggunakan Array.prototype.splice(), tetapi metode itu mengubah Array, jadi lebih baik tidak digunakan splice()dengan React.

Paling mudah digunakan Array.prototype.filter()untuk membuat array baru:

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

Berikut adalah variasi kecil pada respon Aleksandr Petrov menggunakan ES6

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

Gunakan .spliceuntuk menghapus item dari larik. Dengan menggunakan delete, indeks larik tidak akan diubah tetapi nilai indeks tertentu akan diubahundefined

Metode splice () mengubah konten array dengan menghapus elemen yang ada dan / atau menambahkan elemen baru.

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

Edit:

Seperti yang ditunjukkan oleh justin-grant , Sebagai aturan praktis, Jangan pernah bermutasi this.statesecara langsung, karena menelepon setState()setelahnya dapat menggantikan mutasi yang Anda buat. Perlakukan this.stateseolah-olah itu tidak bisa diubah.

Alternatifnya adalah, membuat salinan objek this.statedan memanipulasi salinan, menugaskannya kembali menggunakan setState(). Array#map, Array#filterdll. dapat digunakan.

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

Cara Mudah Untuk Menghapus Item Dari array negara di react:

ketika ada data yang dihapus dari database dan daftar pembaruan tanpa panggilan API saat itu Anda meneruskan id yang dihapus ke fungsi ini dan fungsi ini menghapus dihapus yang dihapus dari daftar

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

Beberapa jawaban disebutkan menggunakan 'sambungan', yang sama seperti yang dikatakan Chance Smith, memutasikan larik. Saya akan menyarankan Anda untuk menggunakan panggilan Metode 'slice' (Dokumen untuk 'slice' ada di sini) yang membuat salinan dari array asli.

Ini Sangat Sederhana Pertama Anda Tentukan nilai

state = {
  checked_Array: []
}

Sekarang,

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

Anda lupa menggunakan setState. Contoh:

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

Tetapi lebih baik digunakan filterkarena tidak mengubah array. Contoh:

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 dokumen untuk info lebih lanjut