React에서 `setState`로 `state.item[1]`을 업데이트하는 방법은 무엇입니까?

State.item을 업데이트하는 방법[1] setState 사용

React 애플리케이션에서 배열이나 객체의 상태를 업데이트하는 것은 까다로울 수 있습니다. 이 기사에서는 React의 일반적인 작업인 setState를 사용하여 상태에서 state.item[1]을 새로 작성하는 방법을 안내합니다.

문제

제공된 React 구성 요소 내에서 목표는 다음을 생성하는 것입니다. 사용자가 자신의 필드를 디자인할 수 있는 동적 양식입니다. 초기 상태는 다음과 같습니다.

this.state.items[1] = {
  name: 'field 1',
  populate_at: 'web_start',
  same_as: 'customer_name',
  autocomplete_from: 'customer_name',
  title: ''
};

사용자가 값을 변경할 때 상태를 업데이트하려고 할 때 문제가 발생합니다. 올바른 개체를 타겟팅하는 것이 어려워집니다.

해결 방법

상태를 올바르게 업데이트하려면 다음 단계를 따르세요.

1. 항목의 얕은 복사본을 만듭니다.
2. 변경하려는 항목의 얕은 복사본을 만듭니다.
3. 관심 있는 속성을 바꿉니다.
4. 배열에 다시 넣습니다. 여기서는 배열을 변경하므로 먼저 복사본을 만드는 것이 중요합니다.
5. 상태를 새 복사본으로 설정합니다.

구현 예:

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

대체 구현:

• 2단계와 3단계 결합:

let item = {...items[1], name: 'newName'}

• 단일 라인 구현:

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

위 내용은 React에서 `setState`로 `state.item[1]`을 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!