React使用Context API管理状态时刷新页面如何恢复之前的状态？

你只需要结合localStorage/sessionStorage做「初始化读取」+「变化自动存储」两步即可，以下是完整修改代码：

步骤1：修改Reducer.js，调整初始状态读取逻辑 #

优先从本地存储读取之前保存的状态，读取失败/无存储内容时使用默认值：

// 新增：从本地存储加载初始状态
const loadSavedState = () => {
  const saved = localStorage.getItem('app_global_state');
  if (!saved) return {
    name: "",
    address: "",
    graduated: false,
    language: []
  };
  try {
    return JSON.parse(saved);
  } catch (err) {
    // 存储内容损坏时降级到默认值
    console.warn('状态缓存损坏，已重置为默认值', err);
    localStorage.removeItem('app_global_state');
    return {
      name: "",
      address: "",
      graduated: false,
      language: []
    };
  }
}

// 初始状态改为从加载函数获取
export const initialState = loadSavedState();

const reducer = (state, action) => {
  switch (action.type) {
    case "UPDATE_INFO":
      return {
        ...state,
        name: action.name,
        address: action.address,
        graduated: action.graduated,
        language: action.language,
      }
    default:
      return state;
  }
}
export default reducer;

步骤2：修改StateProvider.js，状态变化自动同步到本地存储 #

不需要在每个reducer的case里写存储逻辑，统一监听state变化自动持久化：

import React, { createContext, useReducer, useContext, useEffect } from "react";

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => {
  const reducerReturn = useReducer(reducer, initialState);
  const [state] = reducerReturn;

  // 状态变化时自动存到localStorage
  useEffect(() => {
    localStorage.setItem('app_global_state', JSON.stringify(state));
  }, [state]);

  return (
    <StateContext.Provider value={reducerReturn}>
      {children}
    </StateContext.Provider>
  )
}

export const useStateValue = () => useContext(StateContext);

可选调整 #

如果需要关闭浏览器就清空状态，把所有代码里的localStorage替换为sessionStorage即可。
如果后续需要手动清空持久化的状态，直接调用localStorage.removeItem('app_global_state')再刷新页面即可。

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