当前位置: 首页 > news >正文

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.lryc.cn/news/199783.html

相关文章:

  • spring的简单使用(配合Druid操作数据库)
  • 10.20作业
  • 笔记1 Compute Shaders
  • IntelliJ IDEA 2023版本 Debug 时没有Force Step Into 按钮解决方法
  • 【2024秋招】用友后端BIP部门hr面-2023.8.31
  • [ Windows ] ping IP + Port 测试 ip 和 端口是否通畅
  • Golang协程的概念、用法、场景及案例
  • Redis 主从复制,哨兵,集群——(3)集群篇
  • Flink之Watermark水印、水位线
  • uni-app:对数组对象进行以具体某一项的分类处理
  • 顺序队列----数据结构
  • 【Python学习笔记】字符串格式化
  • RIP,EIGRP,OSPF区别
  • 驱动day2作业
  • MySQL基本操作之创建数据表
  • rk平台android12修改dp和喇叭同时输出声音
  • 经典网络模型
  • SystemVerilog Assertions应用指南 Chapter1.29“ disable iff构造
  • C++设计模式之MVC
  • Windows 下Tomcat监测重启
  • 数据库管理-第112期 Oracle Exadata 03-网络与ILOM(20231020)
  • Kubeadm部署k8s集群 kuboard
  • 虚拟机如何联网【NAT】
  • 机器学习,神经网络中,自注意力跟卷积神经网络之间有什么样的差异或者关联?
  • 这件事,准备考PMP的都必须知道
  • elasticsearch常用命令
  • 2000-2021年上市公司MA并购溢价计算数据(含原始数据+Stata代码)
  • 移动端1px-从基本原理到开源解决方案介绍
  • Linux——shell外壳程序
  • 攻防世界web篇-Training-WWW-Robots