Xóa mục khỏi mảng trạng thái trong phản ứng

Câu chuyện là, tôi có thể xếp Bob, Sally và Jack vào một chiếc hộp. Tôi cũng có thể xóa khỏi hộp. Khi loại bỏ, không có khe nào được để lại.

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

Bây giờ tôi cần xóa, nói, "Bob". Mảng mới sẽ là:

["Sally", "Jack"]

Đây là thành phần phản ứng của tôi:

...

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

...

Ở đây tôi chỉ cho bạn một mã tối thiểu vì có nhiều mã hơn (onClick, v.v.). Phần quan trọng là xóa, loại bỏ, hủy "Bob" khỏi mảng nhưng removePeople()không hoạt động khi được gọi. Có ý kiến ​​gì không? Tôi đã xem xét điều này nhưng có thể tôi đã làm sai điều gì đó vì tôi đang sử dụng React.

Để xóa một phần tử khỏi một mảng, chỉ cần thực hiện:

array.splice(index, 1);

Trong trường hợp của bạn:

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

Khi sử dụng React, bạn không nên thay đổi trạng thái trực tiếp. Nếu một đối tượng (hoặc Array, cũng là một đối tượng) bị thay đổi, bạn nên tạo một bản sao mới.

Những người khác đã đề xuất sử dụng Array.prototype.splice(), nhưng phương pháp đó làm thay đổi Array, vì vậy tốt hơn là không nên sử dụng splice()với React.

Dễ sử dụng nhất Array.prototype.filter() để tạo một mảng mới:

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

Đây là một sự thay đổi nhỏ về phản ứng của Aleksandr Petrov khi sử dụng ES6

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

Sử dụng .spliceđể xóa mục khỏi mảng. Khi sử dụng delete, các chỉ mục của mảng sẽ không bị thay đổi nhưng giá trị của chỉ mục cụ thể sẽundefined

Phương thức splice () thay đổi nội dung của một mảng bằng cách loại bỏ các phần tử hiện có và / hoặc thêm các phần tử mới.

Cú pháp: 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);

Biên tập:

Như đã chỉ ra bởi justin-Grant , Theo quy tắc chung, Không bao giờ đột biến this.statetrực tiếp, vì việc gọi setState()sau đó có thể thay thế đột biến bạn đã thực hiện. Đối xử this.statenhư thể nó là bất biến.

Cách thay thế là, tạo bản sao của các đối tượng trong this.statevà thao tác với các bản sao, gán chúng lại bằng cách sử dụng setState(). Array#map, Array#filtervv có thể được sử dụng.

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

Cách dễ dàng để xóa mục khỏi mảng trạng thái trong phản ứng:

khi bất kỳ dữ liệu nào xóa khỏi cơ sở dữ liệu và danh sách cập nhật mà không có API gọi thì thời điểm đó bạn chuyển id đã xóa vào hàm này và hàm này xóa đã xóa đã lưu trữ khỏi danh sách

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

Một số câu trả lời đã đề cập đến việc sử dụng 'splice', điều này đã làm như Chance Smith nói đã làm thay đổi mảng. Tôi khuyên bạn nên sử dụng lệnh gọi Phương thức 'slice' (Tài liệu cho 'slice' ở đây) để tạo một bản sao của mảng ban đầu.

Rất đơn giản Đầu tiên bạn xác định một giá trị

state = {
  checked_Array: []
}

Hiện nay,

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

Bạn quên sử dụng setState. Thí dụ:

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

Nhưng tốt hơn nên sử dụng filtervì nó không gây đột biến mảng. Thí dụ:

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 tài liệu để biết thêm thông tin