간격을 두지 않고 React 상태에서 항목을 제거하는 방법은 무엇입니까?

React 상태에서 항목 제거

React 상태 내의 배열에서 "Bob"과 같은 항목을 제거하는 것과 관련된 질문입니다. 빈 공간을 남기지 않고 배열의 무결성을 보존해야 한다는 의무에서 문제가 발생합니다.

이전에는 delete mutation을 사용하여 Bob을 수동으로 삭제하려는 시도가 실패했습니다. 대신 React의 원칙을 준수하는 솔루션을 권장합니다.

불변 배열 조작

React는 상태 값의 직접적인 조작을 금지합니다. 상태 내에서 배열을 변경하려면 새 복사본을 만들어야 합니다.

Array.prototype.filter()

가장 간단한 접근 방식은 Array.prototype을 활용하는 것입니다. filter()를 사용하여 제거할 항목을 생략하고 새 배열을 구성합니다. 예:

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

이 코드는 this.state.people의 각 요소를 반복하여 새로운 배열을 만듭니다. 이름이 제거할 항목과 같지 않으면(예: "Bob") 새 배열에 유지됩니다.

결론

filter() 활용 상태 불변성을 보장하고 어레이의 무결성을 유지하여 삭제로 인해 남겨진 빈 슬롯을 제거합니다.

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