在我的 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. 我檢查了本地存儲值，它正在正確更新，但組件視圖仍然沒有按照值保留。我無法理解我在哪里做錯了，請幫助解決這個問題？提前致謝。