antd3 升级 antd4+ 引起的bug

1. Form的rules验证规则失效

（1）getFieldDecorator包含的rules不起作用了

修改Form的引用

- import { Form } from '@alipay/bigfish/antd';
+ import { Form } from '@ant-design/compatible';

<Form.Item
    label={$i18n.get({ id: 'jiuzhou.createOrEdit.Basic.Administrator', dm: '管理员' })}
    className={style.formItem}
>
    {getFieldDecorator('administratorList', {
        initialValue: modifyData?.data?.administratorList,
        rules: [{ 
        	required: true,
          message: '请选择站点'
        }]
    })(<UserSelect mode="multiple" />)}
</Form.Item>

（2）不用getFieldDecorator了，全部用4的, 改到Form.Item的属性中

import { Form } from '@alipay/bigfish/antd';

<Form.Item
  label={$i18n.get({ id: 'jiuzhou.createOrEdit.Basic.Administrator', dm: '管理员' })}
  className={style.formItem}
  name='administratorList'
  initialValue={modifyData?.data?.administratorList}
  rules={[{ 
    required: true,
    message: '请选择站点'
  }]}
  >
  <UserSelect mode="multiple" />
</Form.Item>

注意：在Form.create()的初始底层页面，去掉Form.create()，改用Form.useForm();

- export default Form.create<ServiceProps>()((props: ServiceProps) => {
+ export default ((props: ServiceProps) => {

-   const { form } = props;
+   const [form] = Form.useForm();

-  <Form layout="vertical" colon={false}>
+  <Form layout="vertical" colon={false} form={form}>

2. initialValue 属性设置初始值失效

initialValue对于异步更新的值会失效，需要用setFieldsValue进行赋值操作。

注意使用setFieldsValue时，尽量包裹在useEffect或者其他方法中，控制赋值操作，以免被频繁覆盖初始值。

3. 嵌套字段使用数组

过去版本通过 . 代表嵌套路径（诸如 user.name 来代表 { user: { name: '' } }）。然而在一些后台系统中，变量名中也会带上 .。这造成用户需要额外的代码进行转化，因而新版中，嵌套路径通过数组来表示以避免错误的处理行为（如 ['user', 'name']）。

// 这样会造成form表单value层级错乱
// {routes: [{mockResult: oldValue}]} => 
// {routes: [{mockResult: oldValue}], routes[idx].mockResult: newValue}
setFieldsValue({
	[`routes[${idx}].mockResult`]: newValue,
});

// 这样写才对
const newRoutes = [...form.getFieldValue('routes')];  // 克隆 routes 数组
newRoutes[idx] = { ...newRoutes[idx], mockResult: 'newValue' };  // 修改第 idx 元素的 mockResult 值
form.setFieldsValue({ routes: newRoutes });  // 更新表单字段的值

同样getFieldValue也需要改

- item.oneapiTag === getFieldValue(`routes[${idx}].oneapiTag`),
+ item.oneapiTag === getFieldValue(['routes', toNumber(idx), 'oneApiTag'])

name改写：千万注意数组下标不要直接写idx，需要转成toNumber(idx)，否则也无法映射到

- name={`routes[${idx}].oneapiTag`}
+ name={['routes', toNumber(idx), 'oneApiTag']}

4. validateFields 不再支持 callback

validateFields 会返回 Promise 对象，因而你可以通过 async/await 或者 then/catch 来执行对应的错误处理。不再需要判断 errors 是否为空：

// antd v3
validateFields((err, value) => {
  if (!err) {
    // Do something with value
  }
});

改成：

// antd v4
validateFields().then(values => {
  // Do something with value
});