ReactJS의 배열 내 객체를 우아하게 업데이트하는 방법은 무엇입니까?

ReactJS용 배열의 우아한 객체 업데이트

ReactJS에서는 애플리케이션 상태 내의 객체 배열을 관리하는 것이 일반적인 시나리오일 수 있습니다. 그러한 작업 중 하나는 배열 내의 특정 개체를 업데이트하는 것인데, 이는 사용 가능한 기술에 대한 명확한 이해 없이는 어려울 수 있습니다.

예시 시나리오

다음 React를 고려하세요. 구성요소 예:

var CommentBox = React.createClass({
  getInitialState: function() {
    return {
      data: [
        { id: 1, author: "john", text: "foo" },
        { id: 2, author: "bob", text: "bar" },
      ],
    };
  },
  handleCommentEdit: function(id, text) {
    // Handle updating of the object inside the array
  },
});

handleCommentEdit 메소드가 다음과 같을 때 this.state.data의 객체를 업데이트하는 것이 목표입니다. 호출되며 특히 텍스트 속성을 수정합니다.

Object.sign() 접근 방식

일반적으로 선호되는 방법은 Object.sign()을 사용하는 것입니다. 이는 새 개체를 만들지 않고도 기존 개체를 업데이트하는 간결한 방법을 제공합니다.

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

여기에서는 this.state.data의 각 요소를 반복합니다. 요소의 ID가 제공된 ID와 일치하는 경우 Object.sign()을 사용하여 원본 el과 업데이트된 텍스트를 결합하여 새 개체를 만듭니다. 그렇지 않으면 원래 요소를 반환합니다.

확산 연산자 접근 방식

보다 현대적인 접근 방식을 위해 ES2018 스프레드 연산자를 활용할 수 있습니다.

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

Object.sign() 메소드와 유사하게 스프레드 연산자를 사용하여 새 객체를 생성하고 원본 객체와 업데이트된 텍스트를 결합합니다.

Object.sign() 및 확산 연산자 접근 방식은 모두 ReactJS 애플리케이션에서 불변성을 유지하면서 배열 내의 객체를 업데이트하는 효율적이고 우아한 방법을 제공합니다.

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