【React】使用antd的Form组件setFieldsVal

在项目中使用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，下面我把图展示出来

首先，我要实现的需求是如下：编辑页面

屏幕快照 2019-06-03 下午4.46.47.png

编辑页面即是一进来的时候需要赋值，你说，哎呀，编辑多简单，就是个赋值的过程嘛，非常好，但是！我把这个表单用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这个方法呦~！！ 屏幕快照 2019-06-03 下午7.02.10.png

可是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,
            });
        }

第二种方法就符合官网的写法呦~