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

Posted 2023-02-22

【中文标题】如何在 React 中保存嵌套对象的状态？

【英文标题】：How to save a nested object in state in React?

【发布时间】：2021-12-29 09:50:21

【问题描述】：

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

我想我需要一个带有 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,
;

【参考方案1】：

不确定我是否遵循，但如果我理解正确，您希望在每次更新时将 schema 保存到本地存储？

可以这样做：

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

【讨论】：

是的，它是 get 和 set 我意识到这个问题很愚蠢。谢谢。