ReactJS 배열 상태 내에서 객체를 효율적으로 업데이트하려면 어떻게 해야 합니까?

ReactJS 배열의 객체 업데이트: 심층 탐구

ReactJS에서 상태 내의 배열에는 객체가 포함되는 경우가 많습니다. 이러한 개체를 업데이트하는 것은 어려울 수 있습니다. 이 기사에서는 이 작업을 수행하는 효과적인 방법을 자세히 설명합니다.

문제 이해

다음 예를 고려하세요.

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: [
      { id: 1, author: "john", text: "foo" },
      { id: 2, author: "bob", text: "bar" }
    ]};
  },
  handleCommentEdit: function(id, text) {
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedComments = ??; // not sure how to do this  

    this.setState({data: updatedComments});
  }
}

handleCommentEdit 함수 특정 ID로 주석 개체의 텍스트 속성을 업데이트하는 일을 담당합니다. 그러나 질문이 생깁니다. 업데이트된 주석 배열을 어떻게 생성합니까?

강력한 솔루션

효율적인 솔루션에는 Object.sign을 사용하는 것이 포함됩니다.

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

이 코드 조각은 기존 주석 위에 매핑되어 변경되지 않은 모든 개체를 보존합니다. 일치하는 ID를 가진 개체의 경우 원래 속성을 유지하면서 업데이트된 텍스트 속성을 사용하여 새 개체를 생성합니다.

ES2018 Enhancements

최신 JavaScript를 수용하는 경우 ES2018은 스프레드를 사용하여 훨씬 더 간결한 솔루션을 제공합니다.

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

스프레드를 사용하면 기존 텍스트 속성을 바꾸는 것만으로 업데이트된 객체를 생성할 수 있습니다.

결론

ReactJS에서 배열 내의 객체를 업데이트하려면 객체 불변성을 주의 깊게 처리해야 합니다. Object.sign 또는 Spread를 활용하여 개발자는 원래 배열의 무결성을 유지하면서 개체 속성을 효율적으로 업데이트할 수 있습니다. 이러한 방법은 일반적인 ReactJS 프로그래밍 과제에 대한 강력하고 간결한 솔루션을 제공합니다.

위 내용은 ReactJS 배열 상태 내에서 객체를 효율적으로 업데이트하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!