Zustand中异步操作后数据未更新：如何确保useStore()获取到的数据是最新的？

Zustand异步操作导致数据更新延迟的解决方案

在使用Zustand状态管理库时，异步操作后数据更新的时机常常会造成困扰。本文将分析一个案例，并提供解决useStore()获取到的数据滞后于异步操作更新的问题的方案。

问题描述: 开发者使用Zustand定义了一个名为projsslice的切片，包含storeprojs（项目列表）、isloadinggetprojs（加载状态）和storegetprojs（异步获取项目列表的函数）。在fetchapi函数中调用storegetprojs获取项目列表，但由于异步特性，setdatasource(storeprojs)执行时，storeprojs可能仍为空。

原始代码片段:

// store.tsconst {storeprojs, storegetprojs} = usestore()...export const createsettingsslice = (set:any, get:any): projsslice => ({  storeprojs: [],  isloadinggetprojs: false,  storegetprojs: async() => {    set({ isloadinggetprojs: true });    const res = await window.electron.ipcrenderer.invoke("r2m:settings:getproj")    console.log("res12: ", res)    return set(() => ({ storeprojs: res, isloadinggetprojs: false }))  },})// 使用示例const { storeprojs, storegetprojs, isloadinggetprojs } = usestore();async fetchapi(){  await storegetprojs()  // 使用data  setdatasource(storeprojs)  // 问题在这里，storeprojs 仍然为空}

登录后复制