antd3 升级 antd4+ 引起的bug

本文主要讲述了从AntDesignV3到V4版本中Form组件的变更,包括rules验证规则失效、使用Form.useForm替代getFieldDecorator、initialValue的处理、嵌套字段的表示方式改变以及validateFields回调的弃用,帮助开发者适应新版本的API调整。
摘要由CSDN通过智能技术生成
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
});

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值