> 웹 프론트엔드 > JS 튜토리얼 > setState를 사용하여 React의 상태 내 중첩 객체를 업데이트하는 방법은 무엇입니까?

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

Barbara Streisand
풀어 주다: 2024-11-02 07:07:02
원래의
1068명이 탐색했습니다.

How to Update a Nested Object within State in React Using setState?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿