React에서 중첩 상태를 업데이트하는 방법: 단계별 가이드

React에서 중첩 상태 업데이트

React 애플리케이션의 컨텍스트에서 특정 속성을 업데이트해야 하는 상황에 직면할 수 있습니다. 깊게 중첩된 상태 개체입니다. 그러한 시나리오 중 하나는 사용자가 필드를 정의하고 다양한 세부 정보를 지정할 수 있는 양식을 구성하는 경우입니다.

시나리오:

양식 필드를 나타내는 초기 상태 개체가 있습니다. 필드는 키로 식별되며 name 및 populate_at와 같은 속성을 갖습니다. 사용자가 양식 컨트롤과 상호 작용할 때 이러한 속성을 수정할 수 있도록 하려고 합니다.

도전 과제:

상태에서 업데이트할 특정 개체를 대상으로 지정하는 것은 특히 어려울 수 있습니다. 중첩된 객체를 사용하는 경우.

해결책:

state.item[1].name을 업데이트하려면 다음 단계를 사용할 수 있습니다.

1. 상태 개체의 얕은 복사본 만들기:

<code class="javascript">let items = [...this.state.items];</code>

2. 업데이트하려는 특정 항목의 얕은 복사본을 만듭니다.

<code class="javascript">let item = {...items[1]};</code>

3. 복사본에서 원하는 속성을 바꿉니다:

<code class="javascript">item.name = 'newName';</code>

4. 업데이트된 항목을 다시 상태 개체의 복사본에 넣습니다.

<code class="javascript">items[1] = item;</code>

5. 상태를 수정된 복사본으로 설정합니다.

<code class="javascript">this.setState({items});</code>

또는 2단계와 3단계를 한 줄로 결합할 수도 있습니다.

<code class="javascript">let item = {...items[1], name: 'newName'};</code>

한 줄 솔루션 :

배열 확산 연산자를 사용하여 한 줄에서 전체 업데이트를 수행하는 방법은 다음과 같습니다.

<code class="javascript">this.setState(({items}) => ({
    items: [
        ...items.slice(0, 1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));</code>

참고:

예제의 상태 개체는 일반 개체를 사용하여 구성되어 있다는 점에 유의하는 것이 중요합니다. 최신 React 애플리케이션에서는 상태 관리를 위해 useState 후크 또는 Redux를 사용하는 것이 좋습니다.

위 내용은 React에서 중첩 상태를 업데이트하는 방법: 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!