setState를 사용하여 React의 상태 내 중첩 객체를 업데이트하는 방법은 무엇입니까?

React에서 setState를 사용하여 중첩 상태 내의 객체를 업데이트하는 방법

React에서는 대상 지정이 필요한 중첩 상태 객체를 만나는 것이 일반적입니다. 사용자 입력을 기반으로 업데이트됩니다. 다음 코드 조각을 고려하세요.

var DynamicForm = React.createClass({
  getInitialState: function() {
   var items = {};
   items[1] = { name: 'field 1', populate_at: 'web_start',
                same_as: 'customer_name',
                autocomplete_from: 'customer_name', title: '' };
   items[2] = { name: 'field 2', populate_at: 'web_end',
                same_as: 'user_name', 
                    autocomplete_from: 'user_name', title: '' };

     return { items };
   },

  render: function() {
     var _this = this;
     return (
       <div>
         { Object.keys(this.state.items).map(function (key) {
           var item = _this.state.items[key];
           return (
             <div>
               <PopulateAtCheckboxes this={this}
                 checked={item.populate_at} id={key} 
                   populate_at={data.populate_at} />
            </div>
            );
        }, this)}
        <button onClick={this.newFieldEntry}>Create a new field</button>
        <button onClick={this.saveAndContinue}>Save and Continue</button>
      </div>
    );
  }
});

이 구성 요소에서 상태는 위치별로 색인이 지정된 항목을 포함하는 중첩된 개체인 항목으로 구성됩니다. 그러나 목표는 사용자 상호 작용 시 항목 개체 내의 특정 항목을 업데이트하는 것입니다.

var PopulateAtCheckboxes = React.createClass({
  handleChange: function (e) {
     item = this.state.items[1];
     item.name = 'newName';
     items[1] = item;
     this.setState({items: items});
  },
  render: function() {
    var populateAtCheckbox = this.props.populate_at.map(function(value) {
      return (
        <label for={value}>
          <input type="radio" name={'populate_at'+this.props.id} value={value}
            onChange={this.handleChange} checked={this.props.checked == value}
            ref="populate-at"/>
          {value}
        </label>
      );
    }, this);
    return (
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});

위의 접근 방식은 상태를 업데이트하려고 시도하지만 React에서 중첩된 상태 개체를 변경하는 데 권장되는 방법은 아닙니다. 불변성을 보장하고 원치 않는 부작용을 방지하기 위한 올바른 접근 방식은 상태 개체의 얕은 복사본을 만든 다음 복사본을 수정하고 마지막으로 상태를 수정된 복사본으로 설정하는 것입니다.

handleChange: function (e) {
    // 1. Make a shallow copy of the items
    let items = [...this.state.items];
    // 2. Make a shallow copy of the item you want to mutate
    let item = {...items[1]};
    // 3. Replace the property you're interested in
    item.name = 'newName';
    // 4. Put it back into our array. N.B. we *are* mutating the array here, 
    //    but that's why we made a copy first
    items[1] = item;
    // 5. Set the state to our new copy
    this.setState({items});
},

또는 다음과 같은 경우 보다 간결한 접근 방식을 선호하는 경우 스프레드 구문을 사용하여 한 줄로 동일한 결과를 얻을 수 있습니다.

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

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