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: '' };
사용자가 값을 변경할 때 상태를 업데이트하려고 할 때 문제가 발생합니다. 올바른 개체를 타겟팅하는 것이 어려워집니다.
상태를 올바르게 업데이트하려면 다음 단계를 따르세요.
구현 예:
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}); }
대체 구현:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!