useRequest: 当请求返回错误时，run()不能正常工作。但是当请求返回成功（200）， run()可以正常工作。

问题原因

初始init 的时候赋值了run: () => {}， 当请求出错后，response.data 返回时null, 所以没有重置run 函数。

背景

代码主体大约如下：

# useTable.ts
import { useRequest } from "ahooks";
import { useEffect, useRef, useState } from "react";

function useTable<T>(service: any, options?: any) {

    const result = useRef({
        data: [],
        total: 0,
        loading: false,
        run: () => {},
    });

    const [tableData, setTableData] = useState(result.current);

    const { loading, data, error, run }= useRequest<T>(service, {
        throwOnError: true,
        ...options,
    });


    useEffect(() => {
        if (!loading) {
            if (data) {
                result.current =  {
                    data: data,
                    total: data?.length,
                    loading,
                    run,
                }
            }
            setTableData(result.current);
        }
    }, [loading, data, error, run])

    return tableData;
}

export default useTable;

在页面调用如下：

export default () => {
	const { loading, data, error, run } = useTable('/api/users', 
	{ onError: (error) => {console.error(error);} })
	
	return (<>
	<ProList<any>
    headerTitle="用户列表"
    dataSource={data}
    metas={{
      title: {
        dataIndex: 'name',
      },
      description: {
        dataIndex: 'desc',
      },
    }}
  />
	<Button onClick={() => {run()}}> 刷新 </Button>
	</>)
}

当请求成功返回时，点击刷新每次都会请求数据。但是当请求返回异常（500等网络错误）则会不断的调用请求。

解决

useTable.ts 代码中的setTableData(result.current);，不管网络请求成功失败都可以再次调用run()。这个是代码实现问题，当错误返回时，没有重置run 函数( ╯□╰ )

setTableData({...result.current, run,});

参考

• How to prevent React from recreating component tree on error?