ReactJS页面切换时状态重置问题的解决方法咨询

你遇到的核心问题是：React组件的state是内存级状态，当组件被卸载（比如切换路由离开页面）时，状态会被销毁，再次挂载时会重新初始化。要保持状态，需要把状态从组件内部移到更持久的存储位置，下面是几种实用的解决方案：

方案1：用localStorage/sessionStorage做本地持久化 #

这是最简单的方案，适合单个组件的状态保存，把状态同步到浏览器的本地存储中，组件挂载时再读取回来。

Todo列表示例： #

import { useState, useEffect } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  // 组件挂载时，从localStorage读取保存的任务列表
  useEffect(() => {
    const savedTodos = localStorage.getItem('todoList');
    if (savedTodos) {
      setTodos(JSON.parse(savedTodos));
    }
  }, []);

  // 任务列表变化时，同步保存到localStorage
  useEffect(() => {
    localStorage.setItem('todoList', JSON.stringify(todos));
  }, [todos]);

  const handleAddTodo = (text) => {
    setTodos(prev => [...prev, { id: Date.now(), text, completed: false }]);
  };

  // 其他渲染和逻辑代码...
}

Pomodoro计时器示例： #

import { useState, useEffect } from 'react';

function Pomodoro() {
  const [time, setTime] = useState(25 * 60);

  useEffect(() => {
    const savedTime = localStorage.getItem('pomodoroTime');
    if (savedTime) {
      setTime(Number(savedTime));
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('pomodoroTime', time.toString());
  }, [time]);

  const handleAdjustTime = (deltaMinutes) => {
    setTime(prev => Math.max(0, prev + deltaMinutes * 60));
  };

  // 其他渲染和逻辑代码...
}

• 注意点：localStorage会永久保存数据（除非手动清除），sessionStorage只在当前浏览器会话有效；存储的数据必须是可JSON序列化的，复杂类型要提前处理。

方案2：用React Context API管理全局状态 #

如果需要多个组件共享状态（比如Todo列表和计时器的状态可能有联动），可以把状态提升到全局Context中，这样组件卸载再挂载时，状态依然保存在Context的Provider中。

步骤1：创建全局Context #

import { createContext, useContext, useState, useEffect } from 'react';

const AppContext = createContext();

export function AppProvider({ children }) {
  // 全局状态
  const [todos, setTodos] = useState([]);
  const [pomodoroTime, setPomodoroTime] = useState(25 * 60);

  // 结合localStorage做持久化，避免刷新页面丢失状态
  useEffect(() => {
    // 读取保存的状态
    const savedTodos = localStorage.getItem('todoList');
    if (savedTodos) setTodos(JSON.parse(savedTodos));

    const savedTime = localStorage.getItem('pomodoroTime');
    if (savedTime) setPomodoroTime(Number(savedTime));
  }, []);

  // 状态变化时同步到本地存储
  useEffect(() => {
    localStorage.setItem('todoList', JSON.stringify(todos));
    localStorage.setItem('pomodoroTime', pomodoroTime.toString());
  }, [todos, pomodoroTime]);

  return (
    <AppContext.Provider value={{ todos, setTodos, pomodoroTime, setPomodoroTime }}>
      {children}
    </AppContext.Provider>
  );
}

// 自定义Hook，简化Context调用
export function useAppContext() {
  return useContext(AppContext);
}

步骤2：在根组件包裹Provider #

import { AppProvider } from './AppContext';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import TodoList from './TodoList';
import Pomodoro from './Pomodoro';

function App() {
  return (
    <AppProvider>
      <Router>
        <Routes>
          <Route path="/" element={<TodoList />} />
          <Route path="/pomodoro" element={<Pomodoro />} />
        </Routes>
      </Router>
    </AppProvider>
  );
}

步骤3：在组件中使用全局状态 #

// TodoList组件
import { useAppContext } from './AppContext';

function TodoList() {
  const { todos, setTodos } = useAppContext();

  const handleAddTodo = (text) => {
    setTodos(prev => [...prev, { id: Date.now(), text, completed: false }]);
  };

  // 其他逻辑...
}

// Pomodoro组件
import { useAppContext } from './AppContext';

function Pomodoro() {
  const { pomodoroTime, setPomodoroTime } = useAppContext();

  const handleAdjustTime = (deltaMinutes) => {
    setPomodoroTime(prev => Math.max(0, prev + deltaMinutes * 60));
  };

  // 其他逻辑...
}

方案3：用轻量状态管理库（比如Zustand） #

如果项目后续会变得复杂，Zustand是比Context更简洁的选择，自带持久化中间件，无需手动处理localStorage。

创建Store #

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useAppStore = create(persist(
  (set) => ({
    todos: [],
    pomodoroTime: 25 * 60,
    // 修改状态的方法
    addTodo: (text) => set(state => ({
      todos: [...state.todos, { id: Date.now(), text, completed: false }]
    })),
    setPomodoroTime: (time) => set({ pomodoroTime: time })
  }),
  {
    name: 'app-state-storage', // 本地存储的key
  }
));

在组件中使用 #

// TodoList组件
import { useAppStore } from './store';

function TodoList() {
  const todos = useAppStore(state => state.todos);
  const addTodo = useAppStore(state => state.addTodo);

  // 逻辑...
}

// Pomodoro组件
import { useAppStore } from './store';

function Pomodoro() {
  const pomodoroTime = useAppStore(state => state.pomodoroTime);
  const setPomodoroTime = useAppStore(state => state.setPomodoroTime);

  // 逻辑...
}

方案选择建议 #

• 仅单个组件需要保存状态：优先用localStorage/sessionStorage
• 多个组件共享状态：用Context API或Zustand
• 大型复杂项目：考虑Redux Toolkit

内容的提问来源于stack exchange，提问作者astraea