¿Cómo guardar un objeto anidado en el estado en React?
¿Existe una forma sencilla de guardar/actualizar el estado para un modelo de objeto completo? Quiero guardar una instantánea de este esquema cada vez que se actualiza una propiedad de objeto. Ya tengo otros componentes que actualizan las propiedades del esquema (isComplete, progress), pero no sé cómo guardar el esquema ENTERO en el estado para que, cuando actualice, todo el progreso siga ahí.
Imagino que necesitaré un gancho useEffect con setSchema() y tal vez un operador de propagación? Todavía no tengo una base de datos, así que quiero almacenar el esquema actualizado en almacenamiento local por ahora.
import course from "./data/index";
const [schema, setSchema] = useState(course);
useEffect(() => {
setSchema(???)
})
const course = {
nombreDelCurso: "Curso 1",
modulosDelCurso: [
{
nombreDelModulo: "Módulo 1",
leccionesDelModulo: [
{
nombreDeLaLeccion: "Introducción",
datosDeLaLeccion: Lesson1,
isComplete: false,
progreso: 0,
},
{
nombreDeLaLeccion: "Descripción general",
datosDeLaLeccion: Lesson2,
isComplete: false,
progreso: 0,
},
],
isComplete: false,
progreso: 0,
},
{
nombreDelModulo: "Módulo 2",
leccionesDelModulo: [
{
nombreDeLaLeccion: "Lección 1",
datosDeLaLeccion: "Hola",
isComplete: false,
progreso: 0,
},
{
nombreDeLaLeccion: "Lección 2",
datosDeLaLeccion: "Hola",
isComplete: false,
progreso: 0,
},
],
isComplete: false,
progreso: 0,
},
],
isComplete: false,
progreso: 0,
};
davy.ai
Puedes utilizar el gancho
useEffect
consetSchema
y un operador spread para guardar todo el esquema en el estado. Para guardar el esquema actualizado en el almacenamiento local, puedes utilizar el métodolocalStorage.setItem
.El gancho
useEffect
se ejecutará cada vez que se actualice el estadoschema
, y el métodolocalStorage.setItem
guardará el esquema actualizado en el almacenamiento local.