> 웹 프론트엔드 > JS 튜토리얼 > React에서 `setState`로 `state.item[1]`을 업데이트하는 방법은 무엇입니까?

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

Linda Hamilton
풀어 주다: 2024-11-02 16:07:02
원래의
646명이 탐색했습니다.

How to Update `state.item[1]` with `setState` in React?

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

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