场景描述

当有需要切换状态并同时调用接口的情况下，为了体验更好，希望点击tab的时候并不真正的更新tab的状态，要直到接口调用成功后再更新。

因此就期望有如下代码，让这种异步更新数据的操作更简单明了。

const [activeKey, setActiveKey, activeKeyRef] = useAsyncState('wait', async (data) => {
  await reloadAsync(data)
})

代码

代码不多，就不过多讲解了

function useAsyncState <T>(
  initData: T,
  callback?: (data?: T) => void | Promise<void>
): [
  T,
  (data: T) => Promise<void>,
  React.RefObject<T>
] {
  const [data, setData] = useState<T>(initData)
  const tempRef = useRef<T>(initData)

  const setDataProxy = async (data: T) => {
    tempRef.current = data
    await callback?.(data)
    setData(data)
  }

  return [data, setDataProxy, tempRef]
}