"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como atualizar um objeto aninhado no estado usando `setState`?

Como atualizar um objeto aninhado no estado usando `setState`?

Publicado em 17/11/2024
Navegar:818

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

Atualize state.item[1] no estado usando setState

Nesta situação, você está tentando atualizar um objeto dentro de um objeto no seu estado usando setState. Para atualizar corretamente o estado, você precisa fazer uma cópia de todo o objeto de estado, modificar a cópia e, em seguida, definir o estado para a cópia atualizada.

Veja como você pode atualizar state.item[1] usando 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});

Você pode combinar as etapas 2 e 3 se desejar:

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

Ou você pode fazer tudo em uma linha:

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

Nota: Nestes exemplos, presumimos que items era um array. Se items fosse um objeto, você faria atualizações semelhantes nas propriedades do objeto.

Lembre-se, ao usar setState, você deve sempre fazer uma cópia do estado anterior antes de modificá-lo para garantir que você não sofra mutação acidentalmente o objeto de estado original.

Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3