formRef=React.createRef() this.formRef.current为null

情景说明:

      做一个商品查看的页面，商品信息回显，使用的antd，部分代码如下：

.......

export default class GoodsDetail extends React.Component{ 
	ggxhForm = React.createRef();
	constructor(props) {
	    super(props)
		this.state={
			....
			ggxhs:[],
		}
	}
	componentDidMount(){
		service.post(.....).then(res => {
			if (res.data.code === '0000') {
			    this.setState({
                    .....
					ggxhs:res.data.data.ggxhs
				},()=>{
					setTimeout(() => {
					     console.log(this.ggxhForm);
					 }, 100);
				
				})
			}
		})
	}

	render(){
		return (
		    <div className={gdetail.container}>
                ......
			<Row> 
			   <Skeleton>	
				   <Form name="hhhhh"
				         layout="vertical"
						 ref={this.ggxhForm}
						 initialValues={{"ggxhs": this.state.ggxhs}}>
				   		    ......
				   		</Form>
			      </Skeleton>
			</Row>
		</div>
		)
	}
	
}

上面的代码中再构造函数之前，我创建了  ggxhForm 利用的是 React.createRef() 然后再render 函数中Form 中也关联使用了 ref={this.ggxhForm}  然后我在生命周期函数 componentDidMount 中通过Axios 请求后他的接口，在返回的信息中调用this.setState({}) 这个方法，并且在this.setState({})回调函数中去执行resetFileds() 提示 undefined properties "resetFieds" of null 

由此可以判断的是this.ggxhForm.current:null

那么为什么会这样

分析：  在网上我也找了很多的例子，有的说 1. componentDidMount  执行的时候有些form组件还没有被渲染，所有在使用this.ggxhForm.current的可以延迟执行

    setTimeout(() => {
                         console.log(this.ggxhForm);
   }, 100);

可是还是没有解决

然后我想会不会和 <Skeleton></Skeleton>这个组件有一定的关系

这个组件是占位置的组件，脚骨架

果不其然

            <Skeleton loading={this.state.isLoading}>	
				   <Form name="hhhhh"
				         layout="vertical"
						 ref={this.ggxhForm}
						 initialValues={{"ggxhs": this.state.ggxhs}}>
				             .......
				   		</Form>
			      </Skeleton>

里面的loading 如果为true 就会一直的加载，那么里面Form 就不会被初始化

所以解决办法在于，调用成功后台接口之后，将loading 的属性设置为 false

 总结原因是其他的组件影响了Form的初始化（Skeleton   影响了 Form的初始化）

希望对你有所帮助

标签：current,组件,Form,formRef,React,ggxhs,ggxhForm,createRef
来源： https://blog.csdn.net/datouniao1/article/details/122713338