刷新时反应钩子和上下文 api localstorage

Question

在我的 SPA 中，我使用了反应钩子和上下文 API。 我需要持久化使用上下文 API 渲染的组件视图的当前 state 以便我可以通过应用程序实现全局组件条件渲染。

我在单个仪表板页面上有两个视图：概述和详细信息。 该按钮触发全局 state 更改，即使在页面刷新时，视图也应固定在 state 值上。

这是我的代码片段：

应用路由文件

import React, { useState } from "react";
import { Router, Route, Switch } from "react-router-dom";
import history from "../utils/history";
import { PyramidProvider } from "../context/pyramidContext";

import Dashboard from "../pages/dashboard/Dashboard";

const AppRoutes = () => {

  return (
    <div>
      <React.Suspense fallback={<span>Loading...</span>}>
          <Router history={history}>
            <Switch>
              <PyramidProvider>
                <Route path="/" component={Dashboard} />
              </PyramidProvider>
            </Switch>
          </Router>
      </React.Suspense>
    </div>
  );
};

export default AppRoutes;

仪表板页面

import React, { useState, useEffect, useContext } from "react";
import { PyramidContext } from "../../context/pyramidContext";
import PyramidDetail from "../../components/pyramidUI/pyramidDetail";
import PyramidOverview from "../../components/pyramidUI/pyramidOverview";

const Dashboard = (props) => {
  const { info, setInfo } = useContext(PyramidContext);
  return (
    <React.Fragment>
      {info.uiname === "overview" ? <PyramidOverview /> : <PyramidDetail />}
    </React.Fragment>
  );
};

export default Dashboard;

概览组件

import React, { useState, useContext } from "react";
import { PyramidContext } from "../../context/pyramidContext";

const Overview = (props) => {
  const { info, setInfo } = useContext(PyramidContext);

  return (
    <div className="d-flex flex-column dashboard_wrap">
      <main>
        <div className="d-flex">
          <button
            onClick={() => setInfo({ uiname: "detail", pyramidvalue: 1 })}
          >
            change view
          </button>
        </div>
      </main>
    </div>
  );
};

export default Overview;

细节组件

import React, { useContext } from "react";
import { PyramidContext } from "../../context/pyramidContext";
// import axios from "axios";

const Detail = (props) => {
  const { info, setInfo } = useContext(PyramidContext);

  return (
    <div className="d-flex flex-column dashboard_wrap">
      <h2>Detail View</h2>
      <div>
        <button
          type="button"
          onClick={() => setInfo({ uiname: "overview", pyramidvalue: 0 })}
        >
          Back
        </button>
      </div>
    </div>
  );
};

export default Detail;

上下文文件

import React, { createContext, useEffect, useReducer } from "react";
let reducer = (info, newInfo) => {
  return { ...info, ...newInfo };
};
const initialState = {
  uiname: "overview",
  pyramidvalue: 0,
};
const localState = JSON.parse(localStorage.getItem("pyramidcontent"));
const PyramidContext = createContext();
function PyramidProvider(props) {
  const [info, setInfo] = useReducer(reducer, initialState || localState);
  useEffect(() => {
    localStorage.setItem("pyramidcontent", JSON.stringify(info));
  }, [info]);
  return (
    <PyramidContext.Provider
      value={{
        info,
        setInfo,
      }}
    >
      {props.children}
    </PyramidContext.Provider>
  );
}
export { PyramidContext, PyramidProvider };

我单击按钮以呈现detail视图，一旦刷新页面，组件就会将其视图更改为overview而不是坚持detail 。 我检查了本地存储值，它正在正确更新，但组件视图仍然没有按照值保留。

我无法理解我在哪里做错了，请帮助解决这个问题？ 提前致谢。

Answer 1

您永远不会在您的信息 state 中使用 localStage 的值，您应该将代码替换为：

const [info, setInfo] = useReducer(reducer, localState || initialState);