在项目中使用antd的Form组件的setFieldsValue方法的时候发现控制台多了一个警告⚠️：
You cannot set a form field before rendering a field associated with the value.
这句话什么意思呢？在呈现与该值关联的字段之前，不能设置表单字段（用有道翻译出来的，其实偷偷告诉你，读了好几遍都没读懂）
一开始，我以为是生命周期的问题，根据提示的警告以为是应该在render之后才能赋值，所以，沿着错误的步伐在错误的道路上走的一去不回，最终还是没有解决问题
后来，跟身边的大佬讨论了一下，终于发现了问题所在：
this.props.form.form.setFieldsValue这个方法里面传值的时候只能是form中用到的参数(即是getFieldDecorator方法中的field)没有的field一律不允许多传，否则就会报错
写到这里，肯定好多人一脸懵逼，你在说啥？来，不着急，baby，下面我把图展示出来
首先，我要实现的需求是如下：编辑页面
编辑页面即是一进来的时候需要赋值，你说，哎呀，编辑多简单，就是个赋值的过程嘛，非常好，但是！我把这个表单用form封装起来了，所以传统的value已经失效(大概只是展示一下代码的复杂性，好让你们看出来我牛逼哈哈哈)
if (item.type === 'INPUT') {
const INPUT = <FormItem label={label} {...formItemLayout} key={field}>
{
getFieldDecorator(field, {
rules:[{
// initialValue: initialValue,
required:required,
message: requiredMsg,
}]
})(
<Input style={{ width }} type="text" placeholder={placeholder} />
)
}
</FormItem>;
formItemList.push(INPUT)
}else if (item.type === 'TEXTAREA') {
const TEXTAREA = <FormItem label={label} {...formItemLayout} key={field}>
{
getFieldDecorator(field, {
rules:[{
// initialValue: initialValue,
required:required,
message: requiredMsg,
}]
})(
<TextArea
style={{ width }}
placeholder={placeholder}
/>
)
}
</FormItem>
formItemList.push(TEXTAREA)
}
//..........此处省略一万行代码
这样的话怎么赋值呢？？哎呀哎呀好慌好慌～
可是setFieldsValue怎么用呢？别着急！！马上就揭晓！
由于是刚进页面的时候赋值，而且只赋值一次，所以我放在了componentDidMount生命周期中
方法一：（适用于对一组变量赋值）
componentDidMount(){
let { form,updateList,productList } = this.props;
form.setFieldsValue(updateList) //这个方法用到了这里！
}
注意：updateList是在从父组件传过来的，数据格式如下：
state = {
updateList: {
fileType: '0',
ids: [2,3,4],
press: '0',
remark: '111',
send: '0',
service_name: 'kkk',
service_status: '0',
} ,
}
敲黑板！！就是这个updateList的数据出了问题才会报警告，因为我封装的form中的field中没有ids这个参数！！这里多传了一个参数！！所以导致了报警告（至于为什么多传参数我也不知道嘿嘿嘿~）
所以总结： form.setFieldsValue传来的数据这个方法只能适用于field存在的前提下，即数据和field是一对一的关系！明白了吧~
看到这里有的细心的宝宝会发现：咦~这个格式好像和官网格式不一样哇🤩
下面提供另一种写法：适用于对单个变量赋值
方法二：
componentDidMount(){
let { form,updateList,productList } = this.props;
// //给form赋值
form.setFieldsValue({
'service_name': updateList.service_name,
'fileType': updateList.fileType,
'press': updateList.press,
'remark': updateList.remark,
'send': updateList.send,
'service_status': updateList.service_status,
});
}
第二种方法就符合官网的写法呦~
------------------------------------------------------分割线 技术更新----------------------------------------
在又一次用hooks写法撸码的过程中发现了这个警告⚠️：You cannot set a form field before rendering a field associated with the value. 发现上面说的情况符合但是还是报这个警告了，而且刷新的时候还会赋值不上
大体上猜想的是可能由于用hooks写法可能不太熟练，没有放到正确的周期中，导致加载过程很快，还没赋好值就先加载好了，这个时候又有了另一种解决办法：延时
//在你赋值的代码那块延时
setTimeout(()=>{
this.props.form.setFieldsValue(props.updateList);
},100)
