时间戳

首页 > 解决方案 > 从 React 的本地存储中将数据持久化到上下文文件中？

reactjs - 从 React 的本地存储中将数据持久化到上下文文件中？

问题描述

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

我的逻辑：

  1. 单击在状态和本地存储中设置课程的链接
  2. 刷新时，运行获取本地存储值的 useffect，并将
    课程状态设置为该值。

菜单.js

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

上下文.js

  const [lesson, setLesson] = useState();

课程.js

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

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

context.lesson 记录为未定义。

标签： reactjslocal-storageuse-effectreact-contextpersist

解决方案

我使用自定义钩子来解决我的问题。将课程从上下文中移到 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>

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

推荐阅读