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

React: 상태 배열에서 항목 삭제

React에서는 데이터를 효과적으로 유지하는 것이 중요합니다. 상태의 배열로 작업할 때 불변성을 유지하는 것이 중요합니다. 배열을 직접 수정하면 예상치 못한 동작이 발생할 수 있습니다.

과제

개인 "Bob", "Sally" 및 "Jack"이 상태 배열 "사람". 목표는 빈 슬롯을 남기지 않고 배열에서 "Bob"과 같은 개체를 제거하는 것입니다.

잘못된 솔루션

제시된 RemovePeople() 메서드 원하는 인덱스의 배열 요소를 정의되지 않음으로 설정하여 항목 삭제를 시도합니다. 그러나 이 접근 방식은 상태를 직접 변경하여 React의 불변성 원칙을 위반합니다.

React 방식

상태 배열에서 항목을 적절하게 제거하려면 항목을 직접 변경하지 마세요. 대신 수정된 내용으로 새 배열을 만듭니다.

removePeople(e) {
    const updatedPeople = this.state.people.filter(person => person !== e.target.value);
    this.setState({people: updatedPeople});
}

Filter() to the Rescue

Array.prototype.filter()는 다음을 위한 강력한 도구입니다. 지정된 조건에 따라 새 배열을 생성합니다. 이 경우 원래 "사람" 배열에서 대상 사람을 제외하는 데 사용됩니다.

불변성이 핵심입니다

React는 불변 데이터 구조에 크게 의존합니다. 불변성을 유지하면 데이터 일관성이 보장되고, 예상치 못한 상태 변화가 방지되며, 디버깅이 단순화됩니다. filter() 접근 방식에서 설명한 것처럼 새로운 배열 인스턴스를 생성하면 React 개발에서 이 중요한 원칙을 유지할 수 있습니다.

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