React的antd的form组件结合redux使用出现onFieldChange触发多次的问题

场景:react+antd+redux项目,在使用表单时,无表单验证的表单元素change只触发一次,而有表单验证的表单元素会触发两次(有些是多次)
问题原因(待商榷):

以下为截取的部分解释:

应该是getFieldProps 出的问题,我觉得有两个问题
1、使用getFieldProps ,组件在有输入操作时其父页面整个都要render()应该是FORM组件维护了个内部state 任何getFieldProps 的组件输入操作都会更新state整个页面导致刷新。
2、各个包含getFieldProps组件在父页面刷新时其也同时刷新,所以页面内组件一多就卡。

node_modules\react\lib\ReactComponentWithPureRenderMixin.js里的
shouldComponentUpdate: function (nextProps, nextState) {
	return shallowCompare(this, nextProps, nextState);
}

(可以加个断点就可以看出),并且getFieldProps内部不知道做了哪些内容,其非纯函数,导致shallowCompare为true必须刷新。而不包含getFieldProps的组件自己写onchange事件就不会有这个问题。
以上两点导致性能问题。
建议能否:
1、针对第一个问题, FORM内维护state给个回调接口,缺省自动更新,也可设置为自己决定更新时机。
2、对第二个问题,优化各个控件,在外部prop没有变化时不进行render。getFieldProps纯函数实现。

完整的讨论请点击Form 组件结合类似 Redux 等框架,外部 store 存储 fields 。修改会重复触发 onFieldsChange

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Antd Form是一个基于React框架的组件库,用于快速构建表单。在使用React Antd Form时,常常会遇到需要在表单中进行赋值的情况。 React Antd Form提供了多种赋值方式,下面分别介绍常用的两种方式: 1. setFieldsValue setFieldsValue方法用于直接设置表单数据。可以使用该方法将已有的数据赋值给表单中的相应字段。该方法接收一个对象作为参数,对象的属性名对应表单中的字段名,属性值对应表单中的数据。 使用示例: const data = { name: 'Jack', age: 28 }; form.setFieldsValue(data); 在上面的示例代码中,我们将一个包含name和age属性的对象data直接赋值给表单form。 2. initialValues initialValues属性用于在表单初始化时设置初始值。该属性接收一个对象作为参数,对象的属性名对应表单中的字段名,属性值对应表单中的数据。 如果需要动态地修改表单中的初始值,可以将initialValues属性作为Form组件的props传入,在表单初始化后再通过setFieldsValue方法进行修改。 使用示例: const data = { name: 'Jack', age: 28 }; <Form initialValues={data}> <Form.Item label="Name" name="name"><Input /></Form.Item> <Form.Item label="Age" name="age"><InputNumber /></Form.Item> </Form> 在上面的示例代码中,我们将包含name和age属性的对象data作为initialValues传入表单组件中。 总的来说,虽然React Antd Form提供了多种赋值方式,但常见的数据赋值需求基本可以通过使用setFieldsValue方法和initialValues属性来完成。用户可以根据实际需求选择合适的方式来进行赋值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值