React+AntDesign：在Form表单内使用控件的value或defaultValue属性出现invalid Warning非法警告

问题简述

在用到AntDesign的Form表单时往往有时候会用到一些选择器，通常有时候选择器本身会有一个默认值，我们往往习惯用value或defaultValue去注入默认值，但是实际上，在Form表单内写这些选择器组件的时候往往就会出现非法警告。

出现原因

选择器基本上都是写在表单字段组件内，用于数据双向绑定、校验、布局等，因为控件是被Form.Item 包装的，且被设置了 name 属性的 ，表单控件会自动添加 value，数据同步将被 Form 接管，这会导致不能用value 或 defaultValue 等属性来设置表单域的值，否则会出现组件绑定的值在动态更新的时候出现问题。

可查看相关API文档进行深入了解

解决办法

默认值可以用 Form 里的 initialValues 来设置，而当 initialValues 需要动态更新时，就需要用Form表单的 setFieldsValue 来更新，它不能被 setState 动态更新。

1.form表单的默认getFieldDecorator()方法，在里面校验，在里面注射默认值。

<FormItem label="应用权限">
 {
	getFieldDecorator('appIdList', {
		rules:[{
			validator: (rule, value, callback) => {
				if(value && value.length){
					callback()
				}else{
					callback('应用权限请至少勾选一个')
				}
			}
		}],
	initialValue: this.state.appIdList
	})(<Checkbox.Group  options={options} onChange={this.onChange} />)
}
 </FormItem>

2.在form上直接找得到对应字段注入initialValues

<Form
      name="form"
      {...formItemLayout}
      initialValues={{
        ['checkbox-group']: defaultValue,   //注：在此行将form的对应字段注入对应值
      }}
    >
    <Form.Item name="checkbox-group" label="Checkbox.Group">
    	<Checkbox.Group  options={options} onChange={this.onChange} />
    </Form.Item>
</Form>

3、在编辑时通过setFieldsValue ()方法直接向表单的指定那行指定注入

if(isEdit){
	form.setFieldsValue({
	checkbox-group: defaultValue;  //form的name属性字段'checkbox-group'注入对应默认值
	})
}

注意：

仔细看API，你会发现针对组件设置默认值，可以有在Form设置initialValues进行字段数据处理更新，也可以在Form的Item里面通过使用initialValue 进行默认数据处理。但是通常情况下我一般会推荐优先使用 Form 的 initialValues来处理，理由如下：