React中Hooks结合LocalStorage实现数据持久化失败问题排查

问题描述 #

我有一个结构如下的transacciones数组：

export const transacciones = [
    {
        id:100,
        cantidad: 0,
        concepto : 'Ejemplo',
        descripcion: 'Ejemplo',
        
    },
    
]

该数组会像任务列表数据一样动态增删。我尝试用LocalStorage实现数据持久化，推测数据已存储，但在Chrome浏览器刷新后数据消失，甚至不确定是否正确存储。

我尝试了两种使用useEffect Hooks的写法：

第一种写法：

const [transacciones,setTransacciones] = useState([]);

    
    useEffect(()=>{
        localStorage.setItem('transacciones',JSON.stringify(transacciones))
    },[transacciones])
 
    useEffect(() =>{
        const transacciones = JSON.parse(localStorage.getItem('transacciones'))
        if (transacciones){
            setTransacciones(transacciones)
        }
    },[])

看到资料说useState初始值为[]需要调整，于是尝试第二种写法：

const [transacciones,setTransacciones] = useState([],()=>{
        const localData = localStorage.getItem('transacciones');
        return localData ? JSON.parse(localData) : [];
    });


useEffect(()=>{
        localStorage.setItem('transacciones',JSON.stringify(transacciones))
    },[transacciones])

但刷新后仍无法实现持久化，请问我忽略了什么？

解决方案 #

核心问题分析 #

1. 第二种写法的useState用法错误：useState的函数式初始值需直接传入函数，你写的useState([], () => {...})会将[]作为初始值，第二个函数参数不会执行，导致永远读不到LocalStorage的数据。
2. 第一种写法的执行顺序问题：组件挂载时，依赖transacciones的useEffect会先执行，此时transacciones是空数组，会直接覆盖LocalStorage中的已有数据，后续读取的useEffect拿到的就是空值。

正确实现方式 #

方式一：函数式初始值+同步更新

这是最简洁可靠的写法，利用useState的函数式初始值仅执行一次的特性，初始化时读取LocalStorage，后续数据变化时同步存储：

import { useState, useEffect } from 'react';

const [transacciones, setTransacciones] = useState(() => {
  // 读取LocalStorage数据，没有则用默认示例数组
  const localData = localStorage.getItem('transacciones');
  return localData ? JSON.parse(localData) : [
    {
      id: 100,
      cantidad: 0,
      concepto: 'Ejemplo',
      descripcion: 'Ejemplo',
    }
  ];
});

// 数据变化时同步到LocalStorage
useEffect(() => {
  localStorage.setItem('transacciones', JSON.stringify(transacciones));
}, [transacciones]);

方式二：分离初始化与同步（避免覆盖）

如果需要分开处理初始化和同步逻辑，需确保初始化优先执行，且避免初始空数组覆盖已有数据：

import { useState, useEffect } from 'react';

const [transacciones, setTransacciones] = useState([]);

// 组件挂载时初始化数据
useEffect(() => {
  const savedData = localStorage.getItem('transacciones');
  if (savedData) {
    setTransacciones(JSON.parse(savedData));
  } else {
    // 无数据时设置默认值
    setTransacciones([
      {
        id: 100,
        cantidad: 0,
        concepto: 'Ejemplo',
        descripcion: 'Ejemplo',
      }
    ]);
  }
}, []);

// 仅当数据非空时同步到LocalStorage
useEffect(() => {
  if (transacciones.length > 0) {
    localStorage.setItem('transacciones', JSON.stringify(transacciones));
  }
}, [transacciones]);

验证方法 #

在Chrome开发者工具中确认数据是否正确存储：

• 按F12打开开发者工具，切换到Application标签
• 左侧导航找到Local Storage -> 当前网站域名
• 查看是否存在transacciones键，对应的值是否和当前组件中的数据一致

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