Reactjs 如何使用React钩子在localStorage中保持状态？

我在React with hooks中制作了一个简单的todo应用程序。我创建了一个上下文文件并将其导入主应用程序组件，我创建了一个reducer文件并将其导入主应用程序。现在，我想将状态（上下文文件中的项目提交）保存到localState中，然后每次重新加载浏览器时将其加载回应用程序

在做了一些研究之后，我创建了一个定制的钩子，但是我仍然不知道如何解决这个问题。代码如下所示

 function usePersistedState(key, defaultVal) {
  const [myState, setMyState] = useState(() => {
    return localStorage.getItem(key) || defaultVal;
  });

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

  return [myState, setMyState];
} 

---

我想使用我已经创建的钩子来处理我的应用程序状态的本地存储。

请在问题上添加代码，不仅仅是在外部链接中。我看到的第一件事是初始状态没有被反序列化，

JSON.parse（localStorage.getItem（key））

请在问题上添加代码，不仅在外部链接中，我看到的第一件事是初始状态没有被反序列化，

JSON.parse（localStorage.getItem（key））