如何在 React 中保存状态中的嵌套对象？

Question

是否有一种简单的方法来 save/update 整个对象模型的状态？每次更新对象属性时，我都想保存此架构的快照。我已经有其他组件可以更新架构属性（isComplete、进度），但我不知道如何将整个架构保存到状态，以便当我刷新时，所有进度仍然存在？

我想我需要一个带有 setSchema() 的 useEffect 挂钩，也许还需要一个传播运算符？我还没有数据库，所以我想暂时将更新后的模式存储在本地存储中。

   
   import course from "./data/index";

   const [schema, setschema] = useState(course);

   useEffect(()=>{
    setschema(???)
   })

const course = {
  courseName: "Course 1",
  courseModules: [
    {
      moduleName: "Module1",
      moduleLessons: [
        {
          lessonName: "Introduction",
          lessonData: Lesson1,
          isComplete: false,
          progress: 0,
        },
        {
          lessonName: "Overview",
          lessonData: Lesson2,
          isComplete: false,
          progress: 0,
        },
 
      ],
      isComplete: false,
      progress: 0,
    },
   
    {
      moduleName: "Module 2",
      moduleLessons: [
        {
          lessonName: "Lesson 1",
          lessonData: "hello There",
          isComplete: false,
          progress: 0,
        },
        {
          lessonName: "Lesson 2",
          lessonData: "hello There",
          isComplete: false,
          progress: 0,
        },
      ],
      isComplete: false,
      progress: 0,
    },
   
  ],
  isComplete: false,
  progress: 0,
};

Answer 1

不确定我是否理解，但如果我理解正确的话，您想在每次更新时将 schema 保存到本地存储吗？

可以这样做：

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

如何在 React 中保存状态中的嵌套对象？

How to save a nested object in state in React?

schema

state

object

local-storage

reactjs