刷新时反应钩子和上下文 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 [info, setInfo] = useReducer(reducer, localState || initialState);