当前位置: 首页 > 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),也是表单提交。所以会提交两次,
真的是大意了,

相关文章:

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

开发场景: react Hooks andt 提交form表单内容给数据库(使用antd的form组件) 问题描述 提交是异步的,请提交方式是POST 方式 提交表单内容给后端,却产生了两次提交记录(当然,数据新增了两条数据)。可以…...

spring的简单使用(配合Druid操作数据库)

文章目录 准备数据pom.xml文件中引用需要的库准备好dao层接口和service层接口和实现类准备好 jdbc.properties 和 user.properties编写Druid的jdbcConfig配置类编写spring的配置类SpringConfig编写Dao层的实现类的逻辑测试类参考文献 准备数据 create database if not exists …...

10.20作业

#include “widget.h” #include “ui_widget.h” Widget::Widget(QWidget *parent) QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); t new QTimer(this); connect(t, &QTimer::timeout, this, &Widget::timeout_Slot); ui->text->setPlacehold…...

笔记1 Compute Shaders

Wending 2022/10/29 15:43:54 Compute Shaders是在GPU运行却又在普通渲染管线之外的程序,通过Compute Shader我们可以将大量可以并行的计算放到GPU中计算从而节省CPU资源 Wending 2022/10/29 15:44:27 反正不是传统的shader 不常用 博毅创为Blake老师 2022/10/29 15…...

IntelliJ IDEA 2023版本 Debug 时没有Force Step Into 按钮解决方法

IntelliJ IDEA 2023版本 Debug 时没有Force Step Into 按钮解决方法 force step into作用是能够去查看原码, 新版本idea默认移除了这个按钮😢 那么让我们来把它找出来叭✋ 但是我们可以通过设置,使用step into就可以进入系统方法。 1.单击…...

【2024秋招】用友后端BIP部门hr面-2023.8.31

反思 首先,我想为你提供一个背景:HR面试不仅仅是为了了解你的背景和经验,还包括你的性格、沟通能力、问题解决技巧、团队合作精神和其他软性技能。基于你提供的信息,我会提供一些可能影响offer级别的点: 答案的质量&a…...

[ Windows ] ping IP + Port 测试 ip 和 端口是否通畅

开发过程中经常会黑窗口中手动测试一下计划请求的目标ip和端口是否通畅,测试方式如下: 一、单纯测试ip是否能够 ping 通,这个比较熟悉了,运行 cmd 打开黑窗口 输入如下指令,能够如下提示信息,表示端口是通…...

Golang协程的概念、用法、场景及案例

在当今的软件开发领域中,高性能和并发性是很重要的。开发人员需要编写能够有效利用多核处理器的程序,以提高应用程序的性能和响应能力。Go语言(Golang)就是一种在这方面非常强大的编程语言,它提供了一种称为协程&#…...

Redis 主从复制,哨兵,集群——(3)集群篇

目录 1. 前篇回顾 2. Redis 集群是什么? 3. Redis 集群的优点 4. Redis 集群的槽位概念 5. 什么是分片? 6. 如何找到给定key的分片? 7. 分片槽位的设计有什么好处? 8. key映射到节点的三种解决方案 8.1 哈希取余分区 8.…...

Flink之Watermark水印、水位线

Watermark水印、水位线 水位线概述水印本质生成WatermarkWatermark策略WatermarkStrategy工具类使用Watermark策略 内置Watermark生成器单调递增时间戳分配器固定延迟的时间戳分配器 自定义WatermarkGenerator周期性Watermark生成器标记Watermark生成器Watermark策略与Kafka连接…...

uni-app:对数组对象进行以具体某一项的分类处理

一、原始数据 这里定义为五个数组,种类product有aaa,bbb两种 原始数据在data中进行定义 res: {"success": true,"devices": [{no: 0,product: aaa,alias: "设备1",assign: [["a1", "a2", "a3"],[&q…...

顺序队列----数据结构

队列的概念 队列,符合先进先出特点的一种数据结构,是一种特殊的线性表,但它不像线性表一样可以任意插入和删除操作,而是只允许在表的一端插入,也就是在队列的尾部进行插入;只允许在表的另一端进行删除&…...

【Python学习笔记】字符串格式化

1. printf 风格 这种格式化语法 和 传统的C语言printf函数 一样 。 salary input(请输入薪资:)# 计算出缴税额,存入变量tax tax int(salary) *25/100 # 计算出税后工资,存入变量aftertax aftertax int(salary) *75/100 print(税前薪资&…...

RIP,EIGRP,OSPF区别

1. 动态路由协议的作用是什么? 2. 路由协议都有哪些种类? 3. 如何判断路由协议的优劣? -- RIP,EIGRP,OSPF - 动态路由协议 -- 路由协议 - 路由器上的软件 -- 帮助路由器彼此之间同步路由表 -- 相互的传递…...

驱动day2作业

编写应用程序控制三盏灯亮灭 head.h #ifndef __HEAD_H__ #define __HEAD_H__ #define PHY_LED1_MODER 0x50006000 #define PHY_LED2_MODER 0x50007000 #define PHY_LED1_ODR 0x50006014 #define PHY_LED2_ODR 0x50007014 #define PHY_RCC 0x50000A28#endif demo1.c #includ…...

MySQL基本操作之创建数据表

设计表: 学生表(Student): 学号(StudentID)- 主键,用于唯一标识每个学生姓名(Name)性别(Gender)年龄(Age)出生日期(BirthDate)地址(Address)电话(Phone)邮箱(Email)课程表(Course): 课程号(CourseID)- 主键,用于唯一标识每门课程课程名(CourseNam…...

rk平台android12修改dp和喇叭同时输出声音

客户的rk3588主板android12系统,要求接上type-c 进行dp输出显示以后,dp端和主板端都有声音。rk原有系统默认是接上dp显示以后,主板的喇叭声音会被切掉,导致没有声音。要让喇叭和dp同时输出声音需要做如下修改: --- a/…...

经典网络模型

Alexnet VGG VGG的启示 VGGNet采用了多次堆叠3x3的卷积核,这样做的目的是减少参数的数量。 例如,2个3x3的卷积核效果相当于1个5x5的卷积核效果,因为它们的感受野(输入图像上映射区域的大小)相同。但2个3x3卷积核的参数…...

SystemVerilog Assertions应用指南 Chapter1.29“ disable iff构造

在某些设计情况中,如果一些条件为真,则我们不想执行检验。换句话说,这就像是一个异步的复位,使得检验在当前时刻不工作。SVA提供了关键词“ disable iff来实现这种检验器的异步复位。“ disable iff”的基本语法如下。 disable iff (expression) <property definition> …...

C++设计模式之MVC

MVC&#xff08;Model-View-Controller&#xff09;是一种经典的软件架构模式&#xff0c;用于组织和分离应用程序的不同部分&#xff0c;以提高代码的可维护性、可扩展性和重用性。MVC模式将应用程序分为三个主要组成部分&#xff1a; Model&#xff08;模型&#xff09;&…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...