在我的 SPA 中，我使用了反應(yīng)鉤子和上下文 API。我需要保持使用上下文 API 渲染的組件視圖的當(dāng)前狀態(tài)，以便我可以通過應(yīng)用程序?qū)崿F(xiàn)全局組件條件渲染。我在一個(gè)儀表板頁面上有兩個(gè)視圖：概述和詳細(xì)信息。該按鈕觸發(fā)全局狀態(tài)更改，即使在頁面刷新時(shí)視圖也應(yīng)固定在狀態(tài)值上。這是我的代碼片段：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;我單擊按鈕以呈現(xiàn)detail視圖，一旦刷新頁面，組件就會(huì)將其視圖更改為 ，overview而不是停留在detail. 我檢查了本地存儲(chǔ)值，它正在正確更新，但組件視圖仍然沒有按照值保留。我無法理解我在哪里做錯(cuò)了，請(qǐng)幫助解決這個(gè)問題？提前致謝。