背景
代码主体大约如下:
# useTable.ts
import { useRequest } from "ahooks";
const { loading, data, error, run }= useRequest<T>(service, {
throwOnError: true,
...options,
});
return {data, loading, error, run}
在页面调用如下:
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等网络错误)则会不断的调用re-render,最终超过react 的re-render 上限,最终页面报错。