> 웹 프론트엔드 > JS 튜토리얼 > `setState`를 사용하여 상태의 중첩 객체를 업데이트하는 방법은 무엇입니까?

`setState`를 사용하여 상태의 중첩 객체를 업데이트하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-11-04 03:34:30
원래의
300명이 탐색했습니다.

How to Update a Nested Object in State Using `setState`?

setState를 사용하여 상태의 state.item[1] 업데이트

이 상황에서는 객체 내의 객체를 업데이트하려고 합니다. setState를 사용하여 귀하의 주에서. 상태를 올바르게 업데이트하려면 전체 상태 개체의 복사본을 만들고 복사본을 수정한 다음 상태를 업데이트된 복사본으로 설정해야 합니다.

다음을 사용하여 state.item[1]을 업데이트할 수 있습니다. setState:

<code class="javascript">// 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 interested 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});</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>
로그인 후 복사

참고: 이 예에서는 항목이 배열이라고 가정했습니다. 항목이 객체인 경우 객체 속성에 유사한 업데이트를 수행합니다.

setState를 사용할 때 실수로 변경되지 않도록 수정하기 전에 항상 이전 상태의 복사본을 만들어야 한다는 점을 기억하세요. 원래 상태 객체.

위 내용은 `setState`를 사용하여 상태의 중첩 객체를 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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