"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo actualizar un objeto anidado en estado usando `setState`?

¿Cómo actualizar un objeto anidado en estado usando `setState`?

Publicado el 2024-11-17
Navegar:742

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

Actualizar state.item[1] en el estado usando setState

En esta situación, estás intentando actualizar un objeto dentro de un objeto en su estado usando setState. Para actualizar correctamente el estado, debe hacer una copia de todo el objeto de estado, modificar la copia y luego establecer el estado en la copia actualizada.

A continuación se explica cómo actualizar 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});

Puedes combinar los pasos 2 y 3 si lo deseas:

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

O puedes hacer todo en una sola línea:

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

Nota: En estos ejemplos, asumimos que items era una matriz. Si items fuera un objeto, harías actualizaciones similares a las propiedades del objeto.

Recuerda, cuando uses setState, siempre debes hacer una copia del estado anterior antes de modificarlo para asegurarte de no mutar accidentalmente el objeto de estado original.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3