React +AntD + From组件重复提交数据(已解决)

开发场景:

react +Hooks +andt

提交form表单内容给数据库(使用antd的form组件)


问题描述

提交是异步的,请提交方式是POST 方式

提交表单内容给后端,却产生了两次提交记录(当然,数据新增了两条数据)。可以理解是重复提交(2次),核心代码如下:

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


原因分析:

一开始去找解决方案,误以为是没做防抖和节流的缘故,方向错了,问题肯定不好解决,后端也尝试了休眠3秒,有效,但是吧,,,。
因为提交方式是POST ,想到了POST 会发送两次请求(当发送带有自定义请求头的 POST 请求时,浏览器会先发送一个 OPTIONS 请求进行预检,如果服务器允许该请求,则浏览器会再次发送实际的 POST 请求。这就是为什么有时候会看到 POST 请求被发送了两次的情况。),但这也不是原因
最后肯定不理想,还白白浪费了时间,


解决方案:

htmlType="submit"导致的。删除,,

看一下修改之前的:
在这里插入图片描述
修改之后的:
在这里插入图片描述

会发现少了htmlType=“submit” ,(htmlType=“submit” 默认情况下,点击后会执行提交form表单的动作。)
那Button 里面还有一个onClick(form.submit),也是表单提交。所以会提交两次,
真的是大意了,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/140662.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GitKraken for Mac:强大且跨平台的Git客户端

如果你正在寻找一个强大、直观且跨平台的Git客户端,那么GitKraken绝对值得你考虑。在本文中,我们将详细介绍GitKraken的各项功能和优势,以帮助你了解它如何帮助你更有效地管理和提交代码。 GitKraken是一款真正的跨平台工具,可以在…

UE4/5:通过Blender制作BlendShape导入【UE4/5曲线、变形目标,blender形态键】

UE4/5里面,我们经常可以在一些骨骼模型上面看到相关的曲线,如Metahuman里面就是通过这个曲线来改变人物的脸部表情。 而这里笔者将教导如何去制作这种曲线。 这种曲线都是存在于骨骼模型上的,所以我们要么直接制作骨骼模型导入ue&#xff0…

EF执行迁移时提示provider: SSL Provider, error: 0 - 证书链是由不受信任的颁发机构颁发的

ef在执行时提示provider: SSL Provider, error: 0 - 证书链是由不受信任的颁发机构颁发的。 只需要在数据库链接字符串后增加EncryptTrue;TrustServerCertificateTrue;即可 再次执行

2022年亚太杯APMCM数学建模大赛D题储能系统中传热翅片的结构优化求解全过程文档及程序

2022年亚太杯APMCM数学建模大赛 D题 储能系统中传热翅片的结构优化 原题再现 高效储能技术是解决可再生能源和余热资源波动性和间歇性的核心技术。相变蓄热以其较高的储能密度和近恒温蓄热放热而得到广泛应用。固-液相变材料具有相变前后相变潜热高、体积变化小等特点&#x…

数据仓库扫盲系列(1):数据仓库诞生原因、基本特点、和数据库的区别

数据仓库的诞生原因 随着互联网的普及,信息技术已经深入到各行各业,并逐步融入到企业的日常运营中。然而,当前企业在信息化建设过程中遇到了一些困境与挑战。 1、历史数据积存。 过去企业的业务系统往往是在较长时间内建设的,很…

前端 js 之 浏览器工作原理 和 v8引擎 01

嘿,老哥,来了就别跑 !学完 ,不亏 😂 文章目录 一、输入url 之后做了什么二、简单了解下浏览器内核三、浏览器渲染过程 (渲染引擎)四、js 引擎五、chrome五、v8 引擎原理八、浏览器性能优化九、前…

Jenkins+vue发布项目

在Jenkins 中先创建一个任务名称 然后进行下一步,放一个项目 填写一些参数 参数1: 参数2: 参数3:参数4: 点击保存就行了 配置脚本 // git def git_url http://gitlab.xxxx.git def git_auth_id GITEE_RIVER…

突破Java编程的关键:揭示封装、继承和多态的核心原理与实际应用

Java中的封装、继承和多态知识点是学习java必备的基础知识,看似简单,真正理解起来还是有一定难度的,今天小编再次通过实例代码给大家讲解java 封装继承多态知识,感兴趣的朋友一起学习下吧。 封装 所谓的封装就是把类的属性和方法…

docker图形胡界面管理工具--Portainer可视化面板安装

1.安装运行Portainer docker run -d -p 8088:9000 \ > --restartalways -v /var/run/docker.sock:/var/run/docker.sock --privilegedtrue portainer/portainer--restartalways:Docker启动后容器自动启动 -p:端口映射 -v:路径映射2.通过…

数据结构:二叉树(1)

目录 树的概念 树的表示形式 二叉树 二叉树的性质 题目 二叉树的存储 链式存储 初始化二叉树 二叉树的遍历 前序遍历:根👉左子树👉右子树 中序遍历:左子树👉根👉右子树 后序遍历:左子…

如何用工业树莓派和MQTT平台打通OT和IT?

一、应用设备 OT端设备:步进电机,MODBUS TCP远程I/O模块,PLC设备 边缘侧设备:宏集工业树莓派; IT端设备:PC、安卓手机; IT端软件:宏集HiveMQ MQTT通信平台 二、原理 宏集工业树…

重学前端-js类型

javascript目前位置一共有7种数据类型,分别为: Undefined;Null;Boolean;String;Number;Symbol;Object。 Undefined与Null Undefined 类型表示未定义,它的类型只有一个…