Zustand Store中使用new Map初始化变量无效问题

问题原因 #

Zustand 默认集成了 Immer 处理状态更新，Immer 会自动把 Map、Set 这类原生集合类型转换为普通 JavaScript 对象，导致你在组件中获取到的 authorisationData 不再是 Map 实例，而是空对象，自然无法调用 Map 的 get 方法。

解决方案 #

方案1：全局禁用Immer支持 #

如果你的 store 不需要依赖 Immer 的不可变更新能力，创建 store 时直接禁用 Immer 即可：

import { create } from 'zustand'

const authorisationStore = create((set, get) => ({
  authorisationData: new Map(),
  // 这里添加你的其他状态和方法
}), { immer: false }) // 禁用Immer的自动转换

方案2：保留Immer但直接替换Map实例 #

如果需要保留 Immer 对其他状态的处理，更新 Map 时不要修改 Immer 的 draft 对象，而是创建新的 Map 实例替换原状态：

import { create } from 'zustand'

const authorisationStore = create((set, get) => ({
  authorisationData: new Map(),
  // 更新Map的示例方法
  setAuthData: (key, value) => {
    // 基于当前Map创建新实例并更新
    const updatedMap = new Map(get().authorisationData)
    updatedMap.set(key, value)
    // 直接替换原状态，绕过Immer转换
    set({ authorisationData: updatedMap })
  },
  // 检查键是否存在的方法
  hasAuthKey: (key) => {
    return get().authorisationData.has(key)
  }
}))

方案3：使用createWithEqualityFn #

如果需要自定义相等性检查同时禁用 Immer，可以用这个方法：

import { createWithEqualityFn } from 'zustand/traditional'

const authorisationStore = createWithEqualityFn((set, get) => ({
  authorisationData: new Map(),
  // 你的状态和方法
}), Object.is) // 用Object.is作为相等性检查函数，默认不启用Immer

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