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});
  }
}

'데이터' 배열의 개체를 업데이트하려면 다음을 활용합니다. updateComments 변수의 'map' 메소드:

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

이 접근 방식은 'Object.ass'를 사용하여 기존 객체를 업데이트된 속성과 병합하므로 불변성. 또는 ES2018과 호환되는 '확산' 연산자를 선택할 수 있습니다.

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

이러한 기술을 따르면 ReactJS 애플리케이션의 배열 내 객체를 쉽게 업데이트할 수 있습니다.

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