ModalForm children组件获取formRef为空的问题

81 阅读1分钟

Q:使用ModalForm时设置formRef,在组件初始化时获取formRef.current为undefined

A:ModalForm的formRef是透传的BaseForm的,因此需要依赖BaseForm初始化,而Modal默认open=false,因此初始化时没有Form,所以formRef.current=undefined

image.png

分析过程:

由代码可以看出ModalForm中formRef在onInit中会被设置,另外会被BaseForm的formRef双向设置,因此可以猜测,ModalForm加载时BaseForm未完成初始化。

再进一步通过断点确认,BaseForm代码初始时未执行,而在onInit函数中,formRef被赋值。

根据执行顺序确认,BaseForm在open=true时开始初始化,此时Children组件同步执行,因此获取到的formRef为undefined

解决方案:

  1. 手动给ModalForm传入Form对象,进行控制,此时主动设置的Form对象会替代ProForm生成的,也就不存在init时机的问题
const [ modalForm ] = Form.useForm()
const modalFormRef = useRef(modalForm)

return <ModalForm form={modalForm}><Children/></ModalForm>
  1. 在子组件Children中监听formRef是否有值再进行初始化,控制子组件的初始化时机一定在BaseForm之后

PS:useEffect时依赖为formRef是不够的,因为useEffect为浅监听,因此需要显式写formRef.current

// Children.tsx
useEffect(() => {
	// init code
}, [formRef?.current])
  1. 需要官方支持

在ModalForm中直接创建Form对象,而不是依赖BaseForm自动生成的Form对象