为何JSON.stringify会丢失部分属性值？（Next.js+Redux场景）

你遇到的问题是console.log能显示完整的user状态，但JSON.stringify后user变成空对象，核心原因是状态对象的属性无法被JSON序列化机制识别，以下是具体排查方向和解决方案：

1. 状态是Redux Toolkit的Proxy代理对象 #

Redux Toolkit的createSlice等API会用Proxy包装状态，console.log会自动展开代理显示真实值，但JSON.stringify只会读取代理的自有可枚举属性，导致序列化结果为空。

• 解决方法：用Redux Toolkit提供的current工具获取状态的真实快照：

// saveState.ts
import { current } from '@reduxjs/toolkit';

export const saveState = (state: any) => {
  try {
    const realState = current(state); // 获取真实状态对象
    const serializedState = JSON.stringify(realState);
    if (typeof window !== 'undefined') {
      localStorage.setItem('reduxState', serializedState);
    }
  } catch (err) {
    console.error('状态保存失败:', err);
  }
};

2. 状态属性为不可枚举类型 #

如果user的lat、lng是通过Object.defineProperty定义的不可枚举属性，JSON.stringify会直接忽略这些属性。

• 解决方法：手动提取可枚举属性，或修改状态创建逻辑确保属性可枚举：

// 提取可枚举属性示例
const serializableUser = { ...saveState.user };
const serializedState = JSON.stringify({ user: serializableUser });

3. 状态包含特殊实例对象 #

如果lat、lng是第三方地理库的实例对象（而非原始数字），JSON.stringify会将其序列化为空对象。

• 解决方法：手动提取原始值：

const serializableState = {
  user: {
    lat: Number(saveState.user.lat),
    lng: Number(saveState.user.lng)
  }
};
JSON.stringify(serializableState);

4. 服务端环境执行序列化 #

Next.js的SSR/SSG阶段没有localStorage，且服务端状态可能未初始化完全，导致序列化异常。

• 解决方法：确保状态保存逻辑仅在客户端执行：

// saveState.ts中添加环境判断
if (typeof window !== 'undefined') {
  // 执行localStorage操作
}

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