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

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

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

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

원하는 경우 2단계와 3단계를 결합할 수 있습니다.

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

또는 한 줄로 전체 작업을 수행할 수도 있습니다:

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

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

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