关于在react+antd中表单初始化initialValues时无法显示的问题
最近初来乍到,在工作中遇到这么个问题,就是修改内容界面时根据id获取到相应的数据显示到页面但是数据不显示的问题。直接看代码!
页面结构、
生命周期
执行顺序在图中标出了序号render函数执行2次分别是2次和第4次。
此处请求应写在componentWillMount生命周期函数中,此时执行在render之前,Form表单中的 initialValues只会执行一次就是render一次之后后续渲染不会再修改他的值。
antd表单
解决方法就在于上图中的
this.state.initdata&&
它的意思是this.state.initdata不为空的情况下才展示表单,当我们刚刚进入界面时初始化数据的请求就在componentWillMount中发送了,但是此时ajax是异步的调用,不会立即拿到数据,此时代码向下执行执行render函数,render函数中的this.state.initdata还未获取到所以是null表单不会显示所以initialValues不会赋值,直到1s后请求数据拿到并赋值给state中的initdata,调用完setState函数后会动态修改this.state.initdata的值,此时this.state.initdata的值就不再是null了,表单正常渲染。