reactjs - 如何使用 React 钩子使状态在 localStorage 中持久存在？

Question

我用钩子在 React 中制作了一个简单的 todo 应用程序。我创建了一个上下文文件并将其导入到主 App 组件中，我创建了一个 reducer 文件并将其也导入到主 App 中。我现在想让状态（从上下文文件中提交的项目）保存到 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];
} 

代码沙盒项目

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

标签： reactjslocal-storagereact-hooks