es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿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,
};
Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Puedes utilizar el gancho useEffect con setSchema 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étodo localStorage.setItem.

    useEffect(() => {
      setSchema({ ...schema });
      localStorage.setItem('schema', JSON.stringify(schema));
    }, [schema]);
    

    El gancho useEffect se ejecutará cada vez que se actualice el estado schema, y el método localStorage.setItem guardará el esquema actualizado en el almacenamiento local.

Comments are closed.