ProTable添加数据达到表单实时同步新增数据

ProTable添加数据达到表单实时同步新增数据

一、问题的描述

• 每次更新时，protable表格并没有实时更新，而是需要我们通过刷新页面的方式去更新table数据

二 、正常的预期是什么？

• 调取完接口不需要刷新页面，table表自动新增数据

三、问题的解决方案

• 定义刷新参数

//定义手动刷新参数
const actionRef = useRef<any>();

• 在表格添加属性actionRef

<ProTable<API.GetAppList>
    actionRef={actionRef}
/>

• 创建监听参数并传递给子组件

const [isChange,setIsChange] = useState(false);

//监听数据是否变化
useEffect(()=>{
    actionRef.current.reload();
},[isChange]);

//将其传递给添加数据的子组件（子组件可以是个弹窗又或者是页面）
<Children refresh = {(flag)=>{setIsChange(flag)}/>

• 如果子组件新增数据调取接口成功，则修改监听参数的值

//子组件中成功do something之后可以修改其值
refresh && refresh(true);

//同理对数据的删除修改亦可使用此方法刷新

• 父组件监听到变化，会自动刷新表单的数据，而不是刷新页面