背景
子组件使用ProDescriptions组件,通过传入columns和request构建列表。
<Modal
open={visible}
>
<ProDescriptions
columns={columns as any}
request={getTableRequest as any}
/>
</Modal>
父组件通过调用子组件useImperativeHandle
提供的方法,改变visible来控制子组件的渲染
由于ProDescriptions的数据要根据父组件传入的id进行网络请求,所以每次打开的ProDescriptions展示的数据理论上都不一样
useImperativeHandle(ref, () => ({
show: (id: string) => {
setJobId(id);
setVisible(true);
},
}));
于是请求函数就会通过jobId进行网络请求
但是在关闭该弹窗,重新打开并传入新id后,发现不再进行网络请求并且ProDescriptions渲染的数据与第一次相同
解决
-
首先定义了actionRef节点去控制ProDescriptions组件,每次父组件调用show()后进行reload重新渲染。但是除去第一次打开弹窗,后面操作拿到的id都为上一次的id,依然有错。
const actionRef = useRef<ActionInstance>() show:(id:string) => { setJobId(id) actionRef.current?.reload() }
- 因为setState()是异步操作,数据更新存在延时性。所以改用useRef定义数据,通过改变ref.current进行数据改变。
const jobId = useRef<string>('') show:(id:string) => { jobId.current = id actionRef.current?.reload() }