React State의 배열 내 객체를 불변하게 업데이트하는 방법은 무엇입니까?

ReactJS 배열에서 상태 개체 업데이트

애플리케이션 상태의 일부로 배열을 사용하여 작업할 때 개별 개체를 업데이트해야 할 수도 있습니다. 그 배열 내에서. 이는 사용자 데이터, 양식 값 또는 기타 동적 콘텐츠를 관리할 때 일반적인 작업입니다.

상태 업데이트 처리

제공된 예에서 CommentBox 구성 요소는 다음으로 정의됩니다. 주석 객체의 배열을 포함하는 초기 상태. handlerCommentEdit 함수는 지정된 ID와 텍스트로 댓글을 업데이트하는 역할을 담당합니다.

React의 불변성

React의 핵심 원칙 중 하나는 불변 상태를 사용하는 것입니다. 이는 원래 상태 객체가 직접 변경되어서는 안 된다는 것을 의미합니다. 대신, 원하는 변경 사항을 적용하여 새 상태 객체를 생성해야 합니다.

Object.sign을 사용하여 객체 업데이트

배열 내의 객체를 업데이트하는 한 가지 접근 방식은 다음을 사용하는 것입니다. Object.Assign 메소드. 이 메서드는 기존 개체를 첫 번째 인수로 사용하고 후속 인수를 원래 개체에 병합해야 하는 키-값 쌍으로 사용합니다. 결과 객체는 원하는 변경 사항이 포함된 새 객체입니다.

제공된 코드 조각에서 이 접근 방식은 다음과 같이 구현됩니다.

handleCommentEdit: function(id, text) {
    this.setState({
      data: this.state.data.map(el => (el.id === id ? Object.assign({}, el, { text }) : el))
    });
}

Spread를 사용하여 객체 업데이트

ES2018 이상에서는 스프레드 연산자(...)를 사용하여 Object.Assign과 유사한 결과를 얻을 수 있습니다. 스프레드 연산자는 기존 개체의 속성을 제공된 키-값 쌍과 병합합니다.

다음 코드 조각은 스프레드 연산자를 사용하여 주석 개체를 업데이트하는 방법을 보여줍니다.

this.setState({
  data: this.state.data.map(el => (el.id === id ? {...el, text} : el))
});

결론

이러한 기술을 사용하면 ReactJS의 배열 내에서 개별 객체를 쉽게 업데이트할 수 있습니다. 프레임워크의 불변성 원칙을 따릅니다.

위 내용은 React State의 배열 내 객체를 불변하게 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!