0
点赞
收藏
分享

微信扫一扫

【未】React will try to recreate this component tree from scratch using the error boundary you provided

西曲风 2022-03-11 阅读 69

背景

代码主体大约如下:

# 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 上限,最终页面报错。

举报

相关推荐

0 条评论