Loại bỏ phần tử khỏi mảng trong trạng thái thành phần

Tôi đang cố gắng tìm cách tốt nhất để loại bỏ một phần tử khỏi một mảng trong trạng thái của một thành phần. Vì tôi không nên sửa đổi this.statebiến trực tiếp, có cách nào tốt hơn (ngắn gọn hơn) để loại bỏ một phần tử khỏi một mảng so với những gì tôi có ở đây không?:

  onRemovePerson: function(index) {
    this.setState(prevState => { // pass callback in setState to avoid race condition
      let newData = prevState.data.slice() //copy array from prevState
      newData.splice(index, 1) // remove element
      return {data: newData} // update state
    })
  },

Cảm ơn bạn.

cập nhật

Điều này đã được cập nhật để sử dụng gọi lại trong setState. Điều này nên được thực hiện khi tham chiếu trạng thái hiện tại trong khi cập nhật nó.

Cách sạch nhất để làm điều này mà tôi đã thấy là filter:

removeItem(index) {
  this.setState({
    data: this.state.data.filter((_, i) => i !== index)
  });
}

Bạn có thể sử dụng trình update()trợ giúp bất biến từreact-addons-update , điều này thực sự làm điều tương tự dưới mui xe, nhưng những gì bạn đang làm là tốt.

this.setState(prevState => ({
  data: update(prevState.data, {$splice: [[index, 1]]})
}))

Tôi tin rằng việc tham khảo this.statebên trong setState()không được khuyến khích ( Cập nhật trạng thái có thể không đồng bộ ).

Các tài liệu khuyên bạn nên sử dụng setState()với chức năng gọi lại để tiền tố được truyền vào trong thời gian chạy khi cập nhật xảy ra. Vì vậy, đây là cách nó sẽ trông:

Sử dụng Array.prototype.filter không có ES6

removeItem : function(index) {
  this.setState(function(prevState){
    return { data : prevState.data.filter(function(val, i) {
      return i !== index;
    })};
  });
}

Sử dụng Array.prototype.filter với Hàm mũi tên ES6

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i !== index)
  }));
}

Sử dụng bất biến-helper

import update from 'immutability-helper'
...
removeItem(index) {
  this.setState((prevState) => ({
    data: update(prevState.data, {$splice: [[index, 1]]})
  }))
}

Sử dụng lây lan

function removeItem(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

Lưu ý rằng trong mỗi trường hợp, bất kể kỹ thuật được sử dụng, this.setState()đều được thông qua một cuộc gọi lại, không phải là một tham chiếu đối tượng đến cái cũ this.state;

Đây là một cách để loại bỏ phần tử khỏi mảng trong trạng thái bằng cách sử dụng cú pháp lây lan ES6.

onRemovePerson: (index) => {
  const data = this.state.data;
  this.setState({ 
    data: [...data.slice(0,index), ...data.slice(index+1)]
  });
}

Tôi muốn bấm chuông ở đây mặc dù câu hỏi này đã được trả lời chính xác bởi @pscl trong trường hợp có ai khác gặp phải vấn đề tương tự tôi đã làm. Trong số 4 phương pháp, tôi đã chọn sử dụng cú pháp es6 với các hàm mũi tên do tính đơn giản và thiếu phụ thuộc vào các thư viện bên ngoài:

Sử dụng Array.prototype.filter với Hàm mũi tên ES6

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i != index)
  }));
}

Như bạn có thể thấy tôi đã thực hiện một sửa đổi nhỏ để bỏ qua loại chỉ mục ( !==đến !=) bởi vì trong trường hợp của tôi, tôi đã lấy chỉ mục từ trường chuỗi.

Một điểm hữu ích khác nếu bạn thấy hành vi kỳ lạ khi xóa phần tử ở phía máy khách là KHÔNG BAO GIỜ sử dụng chỉ mục của một mảng làm khóa cho phần tử :

// bad
{content.map((content, index) =>
  <p key={index}>{content.Content}</p>
)}

Khi React khác với DOM ảo khi thay đổi, nó sẽ xem xét các phím để xác định những gì đã thay đổi. Vì vậy, nếu bạn đang sử dụng các chỉ mục và có một ít hơn trong mảng, nó sẽ xóa cái cuối cùng. Thay vào đó, hãy sử dụng id của nội dung làm khóa, như thế này.

// good
{content.map(content =>
  <p key={content.id}>{content.Content}</p>
)}

Trên đây là một đoạn trích từ câu trả lời này từ một bài liên quan .

Chúc mọi người mã hóa!

Bạn có thể sử dụng chức năng này, nếu bạn muốn loại bỏ phần tử (không có chỉ mục)

removeItem(item) {
  this.setState(prevState => {
    data: prevState.data.filter(i => i !== item)
  });
}

Như đã đề cập trong một nhận xét cho câu trả lời của ephrion ở trên, bộ lọc () có thể chậm, đặc biệt là với các mảng lớn, vì nó lặp để tìm kiếm một chỉ mục dường như đã được xác định. Đây là một giải pháp sạch, nhưng không hiệu quả.

Như một cách thay thế, người ta có thể chỉ cần 'cắt' phần tử mong muốn và ghép các mảnh.

var dummyArray = [];    
this.setState({data: dummyArray.concat(this.state.data.slice(0, index), this.state.data.slice(index))})

Hi vọng điêu nay co ich!

Bạn có thể làm cho mã dễ đọc hơn với hàm trợ giúp một dòng:

const removeElement = (arr, i) => [...arr.slice(0, i), ...arr.slice(i+1)];

sau đó sử dụng nó như vậy:

this.setState(state => ({ places: removeElement(state.places, index) }));

Chỉ là một gợi ý, trong mã của bạn thay vì sử dụng, let newData = prevState.databạn có thể sử dụng trải rộng được giới thiệu trong ES6 mà bạn có thể sử dụng let newData = ...prevState.data để sao chép mảng

Ba dấu chấm ... đại diện cho Toán tử trải rộng hoặc Tham số phần còn lại ,

Nó cho phép một biểu thức mảng hoặc chuỗi hoặc bất cứ thứ gì có thể lặp lại được mở rộng ở những nơi không có hoặc nhiều đối số cho các lệnh gọi hàm hoặc phần tử cho mảng được mong đợi.

Ngoài ra, bạn có thể xóa mục từ mảng với sau

onRemovePerson: function(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

Hy vọng điều này đóng góp !!

Đây là một cách đơn giản để làm điều đó:

removeFunction(key){
  const data = {...this.state.data}; //Duplicate state.
  delete data[key];                  //remove Item form stateCopy.
  this.setState({data});             //Set state as the modify one.
}

Hy vọng nó giúp!!!