将数据从 React 的本地存储中持久保存在上下文文件中？答案

【问题标题】：persist data in context file from local storage in React?将数据从 React 的本地存储中持久保存在上下文文件中？
【发布时间】：2021-11-14 06:09:51
【问题描述】：

我正在使用 React 上下文来存储一个名为 course 的变量，该变量通常包含一个数字 1-7。我试图在刷新页面时保留课程编号。到目前为止，当我单击链接时，我可以看到正确的数字设置为本地存储，但是当我刷新 Lesson.js 时，由于 context.lesson 未定义，我得到了错误。（课程变量最初是通过 Menu.js 中的事件设置的。）本质上，状态“课程”在刷新时正在清除/未定义。

我的逻辑：

单击在状态和本地存储中设置课程的链接
刷新时，运行获取本地存储值的 useffect，然后
设置课程状态。

菜单.js

     <Link
        to={`/Module/${index + 1}`}
        onClick={() => {context.setLesson(index + 1);}}
     />

上下文.js

  const [lesson, setLesson] = useState();

Lesson.js

  useEffect(() => {
    localStorage.setItem("lesson", JSON.stringify(context.lesson));
  });

  useEffect(() => {
    const data = localStorage.getItem("lesson");
    if (data) {
      context.setLesson(JSON.parse(data));
    }
  }, []);

context.lesson 记录为未定义。

【问题讨论】：

标签： reactjs local-storage use-effect react-context persist

【解决方案1】：

我使用自定义挂钩来解决我的问题。将课程从上下文中移到 App.js 中。

 //initial lesson state
  const [lesson, setLesson] = useLocalStorage("lesson", "0");
  //set lesson state
  function setLessonHandler(param) {
    setLesson(param);
  }
  return (
    <AppProvider>
      <Switch>
        <Route exact path="/">
          <Menu setLesson={setLessonHandler} />
        </Route>
        <Route path="/Module">
          <Lesson lesson={lesson} />
        </Route>
      </Switch>
    </AppProvider>

不幸的是，我不能使用服务器来解决这个问题，所以它是本地存储！

【讨论】：