React의 상태 배열에서 항목을 안전하게 삭제하는 방법은 무엇입니까?

React의 배열에서 항목 삭제: 가이드

React에서 상태 관리는 애플리케이션 동작의 무결성을 유지하고 사용자 경험. 일반적인 시나리오에는 항목 추가, 제거 또는 업데이트와 같은 상태의 배열 조작이 포함됩니다.

상태 배열에서 항목을 삭제하는 방법을 이해하려면 다음과 같은 간단한 예를 살펴보겠습니다.

당신은 세 사람의 목록(Bob, Sally, Jack)을 상태 배열에 저장하려고 합니다. 목록에서 이들 중 하나를 제거할 수 있어야 하며 제거 시 배열에 빈 슬롯이 없어야 합니다.

React 구성 요소에 다음 코드가 있을 수 있습니다.

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

그러나 이 RemovePeople() 함수 구현은 호출 시 의도한 대로 작동하지 않습니다. 그 이유는 React가 상태 변이를 처리하는 방식에 있습니다.

React에서 상태를 직접적으로 변경하지 마세요

상태의 객체나 배열을 업데이트할 때 새로운 객체를 생성하는 것이 필수적입니다. 복사. 원래 상태 개체나 배열을 직접 변경하면 예기치 않은 동작과 잠재적인 버그가 발생할 수 있습니다.

이 경우 원래 상태 개체를 수정하는 배열에서 요소를 직접 삭제해도 업데이트가 트리거되지 않습니다. React의 상태. 상태는 변경되지 않고 UI에는 목록에서 Bob 제거가 반영되지 않습니다.

안전한 제거를 위해 Array.prototype.filter() 사용

React와 호환되는 방식으로 상태 배열에서 항목을 제거하려면 몇 가지 옵션이 있습니다. 한 가지 효과적인 방법은 Array.prototype.filter()를 활용하는 것입니다.

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

이 접근 방식은 필터링된 결과로 새 배열을 생성합니다. 이 경우 목표 값을 가진 사람을 필터링하여 목록에서 효과적으로 제거합니다. 그러면 결과로 생성된 새 배열이 상태로 설정되어 항목 제거를 반영하는 데 필요한 UI 업데이트가 트리거됩니다.

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