setState를 사용하여 상태의 state.item을 업데이트하는 방법은 무엇입니까?

Question

저는 사용자가 자신만의 양식을 디자인할 수 있는 응용 프로그램을 만들고 있습니다. 예를 들어. 필드 이름과 포함되어야 하는 다른 열의 세부정보를 지정합니다.

이 구성요소는 JSFiddle로 사용 가능합니다.

제 초기 상태는 다음과 같습니다:

var DynamicForm = React.createClass({
  getInitialState: 함수() {
   var 항목 = {};
   items[1] = { name: 'field 1', populate_at: 'web_start',
                동일_명: '고객_이름',
                autocomplete_from: '고객_이름', 제목: '' };
   items[2] = { name: 'field 2', populate_at: 'web_end',
                동일_명: '사용자_이름',
                    autocomplete_from: 'user_name', 제목: '' };

     { 항목 } 반환;
   },

  렌더링: 함수() {
     var _this = 이것;
     반품 (
       <div>
         { Object.keys(this.state.items).map(함수 (키) {
           var item = _this.state.items[key];
           반품 (
             <div>
               <PopulateAtCheckboxes this={this}
                 확인됨={item.populate_at} id={key}
                   populate_at={data.populate_at} />
            </div>
            );
        }, 이것)}
        <button onClick={this.newFieldEntry}>새 필드 만들기</button>
        <button onClick={this.saveAndContinue}>저장하고 계속하기</button>
      </div>
    );
  }

사용자가 값을 변경할 때 상태를 업데이트하고 싶지만 올바른 개체를 찾는 데 문제가 있습니다.

var PopulateAtCheckboxes = React.createClass({
  handlerChange: 함수 (e) {
     항목 = this.state.items[1];
     item.name = '새이름';
     항목[1] = 항목;
     this.setState({items: 항목});
  },
  렌더링: 함수() {
    var populateAtCheckbox = this.props.populate_at.map(function(value) {
      반품 (
        <레이블={값}>
          <input type="radio" name={'populate_at'+this.props.id} 값={value}
            onChange={this.handleChange} 확인됨={this.props.checked == 값}
            ref="채우기-at"/>
          {값}
        </라벨>
      );
    }, 이것);
    반품 (
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});

items[1].name를 업데이트하려면 this.setState를 어떻게 만들어야 하나요?

Answer 1

이를 달성하려면 更新불변성 도우미를 사용할 수 있습니다. : p> 으아악

또는 === 在 shouldComponentUpdate() 수명 주기 메서드를 사용하여 이에 대한 변경 사항을 감지할 수 있는지 신경 쓰지 않는다면 상태를 직접 편집하고 구성 요소를 강제로 다시 렌더링할 수 있습니다. 이는 실제로 @limelights의 답변과 동일합니다. 객체를 상태에서 꺼내 편집합니다.

으아악

---

나중에 편집이 추가되었습니다:

상태를 보유하고 있는 상위 구성 요소에서 상태 변경을 트리거해야 하는 하위 구성 요소로 콜백 함수를 전달하는 방법에 대한 예를 보려면 간단한 구성 요소 통신 react-training의 강의를 확인하세요.

Answer 2

도우미 라이브러리 없이 이를 수행하는 방법은 다음과 같습니다.

으아악

필요한 경우 2단계와 3단계를 결합할 수 있습니다.

으아악

또는 한 줄로 모든 작업을 수행할 수도 있습니다:

으아악

참고: 저는 items를 배열로 만들었습니다. OP는 객체를 사용했습니다. 그러나 개념은 동일합니다.

---

터미널/콘솔에서 무슨 일이 일어나고 있는지 확인할 수 있습니다.

으아악