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
});