情景说明:
做一个商品查看的页面,商品信息回显,使用的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的初始化)
希望对你有所帮助