ahooks/useRequest里的数据不一致问题

const App: FC = () => {
  const [count, { inc }] = useCounter();
  const result = useRequest(
    async () => {
      const data = await getData(count);
      return data;
    },
    { refreshDeps: [count] }
  );
  if (result.loading) return "loading";
  return <Button onClick={() => inc()}>{result.data}</Button>;
};

这段代码存在的问题是 count变化引发渲染时 result里的data loading依旧是老数据
useRequest会通过useEffect更新data和loading等数据 参考文档

一般情况下这种写法不能算错 但是如果getData会根据count的不同 返回不同的数据结构 就会导致问题

<Comp count={count} data={result.data}/>

Comp会根据count的不同 以不同的方式解析数据结构 但是useRequest却不能保证count与数据类型相匹配

解决方法

使用小寄巧

  const result = useRequest(
    async () => {
      const data = await getData(count);
      return [count,data] as const;
    },
    { refreshDeps: [count] }
  );

像这样返回值 并且此后以result.data.count作为唯一的count来源

使用useSWR

这个库不存在这样的问题 并且可以支持suspense