불변성을 유지하면서 React 상태의 배열에서 항목을 제거하는 방법은 무엇입니까?

React의 배열 상태에서 항목 제거

React에서 상태 관리는 구성 요소의 내부 데이터를 유지하는 데 중요합니다. 상태의 배열을 처리할 때 일반적인 함정을 피하려면 불변성을 유지하는 것이 필수적입니다.

상태의 배열에서 항목을 제거하는 시나리오를 생각해 보세요. 일반적인 접근 방식은 질문에 표시된 대로 Array.prototype.delete()를 사용하여 원래 배열을 변경하는 것입니다.

removePeople(e) {
  var array = this.state.people;
  var index = array.indexOf(e.target.value);
  delete array[index];
}

그러나 React에서는 상태를 직접 변경하지 않는 것이 좋습니다. 대신 원하는 변경 사항이 포함된 배열의 새 복사본을 만듭니다.

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

이 접근 방식은 Array.prototype.filter() 메서드를 활용하여 제거할 요소를 제외한 모든 요소를 ​​포함하는 새 배열을 만듭니다. . 원래 배열을 변경하지 않아 상태의 불변성을 보장합니다.

이 접근 방식을 사용하면 상태 무결성을 유지하고 React에서 상태 변경과 관련된 잠재적인 문제를 피할 수 있습니다.

위 내용은 불변성을 유지하면서 React 상태의 배열에서 항목을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!