在Zustand Store中更新嵌套类StoragePolicySettings时出现undefined问题

问题根源 #

• 直接访问store.storagePolicySettings获取当前状态可能存在过期状态问题，异步操作中状态可能已更新，导致基于旧状态扩展的新对象丢失属性
• 若StoragePolicySettings是类实例，对象扩展运算符...可能无法正确复制类的所有属性（比如非自有可枚举属性、getter/setter）

解决方案1：用函数式更新获取最新状态 #

把直接访问store状态改为在set回调里获取最新的前置状态，确保更新基于最新值：

async function initializeData() {
  const [computerGroups, ...otherVars] = await Promise.all([
    getComputerGroups(),
    // 其他API调用
  ]);

  store.setStoragePolicySettings((prevSettings) => ({
    ...prevSettings,
    appliesToOptions: computerGroups,
  }));
}

解决方案2：优化store的更新方法（推荐） #

修改store中的setStoragePolicySettings方法，支持部分属性更新，不用手动扩展整个对象：

type Store = {
  storagePolicy: StoragePolicyDto;
  setStoragePolicy: (policy: StoragePolicyDto) => void;

  storagePolicySettings: StoragePolicySettings;
  setStoragePolicySettings: (
    partialSettings: Partial<StoragePolicySettings>
  ) => void;
};

export const useStore = create<Store>((set) => ({
  storagePolicy: new StoragePolicyDto(),
  setStoragePolicy(storagePolicy: StoragePolicyDto) {
    set((state) => ({
      ...state,
      storagePolicy: storagePolicy,
    }));
  },
  storagePolicySettings: new StoragePolicySettings(),
  setStoragePolicySettings(partialSettings: Partial<StoragePolicySettings>) {
    set((state) => ({
      ...state,
      storagePolicySettings: {
        ...state.storagePolicySettings,
        ...partialSettings,
      },
    }));
  },
}));

调用时只传需要更新的属性就行：

async function initializeData() {
  const [computerGroups, ...otherVars] = await Promise.all([
    getComputerGroups(),
    // 其他API调用
  ]);

  store.setStoragePolicySettings({ appliesToOptions: computerGroups });
}

解决方案3：处理类实例的属性复制 #

如果StoragePolicySettings是类实例，扩展运算符无法正确复制属性时，用Object.assign创建新实例：

store.setStoragePolicySettings((prevSettings) => {
  const newSettings = new StoragePolicySettings();
  Object.assign(newSettings, prevSettings);
  newSettings.appliesToOptions = computerGroups;
  return newSettings;
});

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