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

Question

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

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

这是我的代码片段：

AppRoutes 文件

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;

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

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

Answer 1

您永远不会在信息状态中使用 localStage 的值，您应该将代码替换为：const&nbsp;[info,&nbsp;setInfo]&nbsp;=&nbsp;useReducer(reducer,&nbsp;localState&nbsp;||&nbsp;initialState);