ant-design proTable 之 request 和 actionRef

背景
初次接触proTable, 主要实现的功能有以下两点：

 

 

 

1、点击修改标签，修改成功后更新表格并且重新渲染
2、自动分页功能，注意这里与后端有一个交互共识就是，后端每次只返回某个页面的数据。前端每次触发翻页都会自动请求当页的数据。

1、使用request渲染表格
一开始的时候我用的dataSource, 每次想重新渲染表格都是通过useState重新设置。但是到了分页的时候就没办法了，因为不比pagination组件可以设置total, proTable没有设置从页数或者总数据数的入口。这时候就要用到request, request 能自动获取表格数据，还有一个很重要的功能就是支持自动分页。

 

 

 

 

2、使用actionRef 刷新表格
修改标签并保存成功后，需要再次发起request请求更新数据。此时用到actionRef.current?.reload（）方法。一开始我以为actionRef.current里面有request方法可以重新调用，但其实不是的，直接调用reload方法会自动触发request请求。

 

 

 

 

 

 

 actionRef还有很多其它的用法，对于可编辑表格之类的。这次只是简单用下reload。

 

延伸：

不止是在ProTable中可以用，在其他例如ProList中也可以用，例如想实现点击未读消息让黄点消失，上来先在request中获取List中的数据，然后再从点击事件onRow={onRowClick}中触发一下actionRef，用actionRef.current?.reload就可以实现点击以后重新发起request请求渲染List中的数据。