React基于createContext/useContext的车辆数据localStorage持久化实现问题

完全可以实现需求，无需引入useReducer或Redux，仅调整现有ContextProvider的逻辑即可解决刷新后状态被重置的问题。

核心问题根因：当前vehicles状态初始化时直接绑定硬编码的默认车辆数组，未在组件首次挂载时优先读取localStorage中已存储的历史数据，因此页面刷新时Context会直接使用预设默认值重置状态，甚至会触发原有同步逻辑覆盖localStorage内的用户历史数据。

实现逻辑拆解 #

• 改造vehicles状态的初始化逻辑，优先从localStorage读取历史存储的车辆数据，无有效数据时才使用默认的初始值兜底
• 通过useEffect监听vehicles状态变化，自动将最新数据序列化同步到localStorage，无需在新增、删除车辆的方法中重复编写存储逻辑

修改后的完整代码 #

import React, { createContext, useState, useEffect } from "react";

export const VehicleContext = createContext();

// 自定义本地存储的key名，避免和其他应用的存储内容冲突
const VEHICLE_STORAGE_KEY = "user_vehicles_data";

function VehicleContextProvider(props) {
  const [photo] = useState(null);

  // 惰性初始化vehicles状态：优先读取本地存储内容
  const [vehicles, setVehicles] = useState(() => {
    // 定义默认初始值作为兜底
    const defaultVehicles = [
      {
        id: Math.floor(Math.random() * 100),
        brand: "Honda",
        model: "Accord",
        prodYear: 2012,
        bodyType: "Sedan",
        registrationNum: "XYZ 98791",
        tankCapacity: 60,
        fuelConsumption: 8,
        fuelType: "Petrol",
        photo:
          photo ||
          "https://firebasestorage.googleapis.com/v0/b/carwallet-react.appspot.com/o/photos%2Fhonda.jpg?alt=media&token=dcca1cde-ed10-4004-9ddf-0085e1a9b815",
      },
    ];

    try {
      // 解析本地存储的车辆数据
      const storedVehicles = localStorage.getItem(VEHICLE_STORAGE_KEY);
      return storedVehicles ? JSON.parse(storedVehicles) : defaultVehicles;
    } catch (err) {
      // 本地存储内容格式异常时，直接回退到默认值避免页面崩溃
      return defaultVehicles;
    }
  });

  // 状态变化时自动同步到localStorage
  useEffect(() => {
    localStorage.setItem(VEHICLE_STORAGE_KEY, JSON.stringify(vehicles));
  }, [vehicles]);

  // 原有业务逻辑无需调整
  const addNewVehicle = (vehicle) => {
    setVehicles([
      ...vehicles,
      {
        id: Math.floor(Math.random() * 100),
        brand: vehicle.brand,
        model: vehicle.model,
        prodYear: vehicle.prodYear,
        bodyType: vehicle.bodyType,
        registrationNum: vehicle.registrationNum,
        tankCapacity: vehicle.tankCapacity,
        fuelConsumption: vehicle.fuelConsumption,
        fuelType: vehicle.fuelType,
        photo: vehicle.photo,
      },
    ]);
  };

  const removeVehicle = (id) => {
    setVehicles(vehicles.filter((vehicle) => vehicle.id !== id));
  };

  return (
    <VehicleContext.Provider
      value={{ vehicles, addNewVehicle, removeVehicle }}
    >
      {props.children}
    </VehicleContext.Provider>
  );
}

export default VehicleContextProvider;

注意事项 #

• 不要在addNewVehicle、removeVehicle方法里手动编写localStorage读写逻辑，统一通过useEffect监听状态变化同步，后续新增其他车辆操作逻辑时不需要重复写持久化代码
• 读取localStorage时必须加异常捕获：如果用户手动修改浏览器存储内容导致JSON格式不合法，JSON.parse会抛出错误，捕获后回退到默认值可以避免页面白屏
• 必须使用useState(() => {})的惰性初始化写法，如果直接在useState参数里执行读localStorage的逻辑，每次组件重渲染都会重复执行读取操作，造成不必要的性能损耗

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