Zustand 状态与 javascript 地图未更新

Question

我正在尝试使用地图来存储状态，当状态正在更新时，组件不会使用新状态重新渲染

const store = (set, get) => ({
    items: new Map(),
    addItem: (key, item) => {
        set((state) => state.items.set(key, item));
        // this prints the latest state
        console.log(get().items)
    },
    removeItem: (key) => {
        set((state) => state.items.delete(key));
    },
)}
const useStore = create(store);
export default useStore

---

useEffect 不打印任何内容

const items = useStore((state) => state.items))
useEffect(() => {
   console.log(items)
}, [items]);

Answer 1

Map您应该在更新时创建一个新实例，如下所示：

const store = (set, get) => ({
    items: new Map(),
    addItem: (key, item) => {
        set((state) => {
            const updatedItems = new Map(state.items)
            updatedItems.set(key, item)
            return { items: updatedItems }
        });
        // this prints the latest state
        console.log(get().items)
    },
)}

注意：删除项目时，您必须执行类似的操作。