页面重新渲染/更改后如何维护组件状态？

Posted 2023-02-19

【中文标题】页面重新渲染/更改后如何维护组件状态？

【英文标题】：How to maintain component state after page rerender/change?

【发布时间】：2021-11-15 06:55:09

【问题描述】：

我有一个使用上下文 API 制作的计数器，我需要它在页面更改后保持当前状态。有什么方法可以在页面更改时保持 Counter 值，例如在会话存储或其他内容中？我正在使用反应路由器来更改页面。

export const CounterContext = React.createContext()



function App() 

  const [Counter, setCounter] = useState(0)
  useEffect(() => 
    setCounter(JSON.parse(window.localStorage.getItem('count')));
  , []);

  useEffect(() => 
    window.localStorage.setItem('count', Counter);
  , [Counter]);
  
  function ChangeCounter() 
    setCounter(Counter+1);
  
  console.log(Counter);

  return (
    <CounterContext.Provider value=Counter, ChangeCounter>
    <Router>
    <div className="App">
      <header className="App-header">
        <Navbar />
      </header>
      <div className="Content">
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/Products">
            <Products />
          </Route>
          <Route path="/Contact">
            <Contact />
          </Route>        
        
        </Switch>
      </div>
      
      <footer>
        <Footer />
      </footer>
    </div>
    </Router>
    </CounterContext.Provider>
  );

编辑： 我使用本地存储完成了它，但我不确定这是否是我想要的。现在即使在浏览器重新启动时，计数器也会保持相同的更新值，但我希望它刷新。现在有没有办法做到这一点？

【问题讨论】：

我不熟悉 redux 或 react 的路由器，但是浏览器的 localstorage 呢？

当你访问不同的页面路由时，应该保留状态。它不会的唯一原因是如果 App 正在重新安装。您能否展示呈现App 的代码，以及用于更改页面的代码？

【参考方案1】：

您可以为此功能使用 cookie。 你可以更喜欢 universal-cookie 在 react 中操作 cookie

npm install universal-cookie

【参考方案2】：

好的，我做到了。非常感谢大家！我使用 sessionStorage 仅在会话期间存储数据。它看起来像这样：

export const CounterContext = React.createContext()



function App() 

  const [Counter, setCounter] = useState(0)
  useEffect(() => 
    setCounter(JSON.parse(window.sessionStorage.getItem('count')));
  , []);

  useEffect(() => 
    window.sessionStorage.setItem('count', Counter);
  , [Counter]);

  function ChangeCounter() 
    setCounter(Counter+1);
  
  console.log(Counter);
//and the rest  of the code...