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.mzph.cn/news/114267.shtml

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

相关文章

基于WebRTC的程序因虚拟内存不足导致闪退问题的排查以及解决办法的研究

目录 1、WebRTC简介 2、问题现象描述 3、将Windbg附加到目标进程上分析 3.1、Windbg没有附加到主程序进程上,没有感知到异常或中断 3.2、Windbg感知到了中断,中断在DebugBreak函数调用上 3.3、32位进程用户态虚拟地址和内核态虚拟地址的划分 …

分享5个解决msvcp140.dll丢失的方法,全面解析msvcp140.dll丢失的原因

一、MSVCP140.dll是什么? 首先,我们需要了解什么是MSVCP140.dll。MSVCP140.dll是一个动态链接库文件,它是Microsoft Visual C 2015 Redistributable的一部分。这个文件包含了运行使用C编写的应用程序所需的一些函数和类。因此,当…

MongoDB URL链接 如何设置账号密码

个人博客,求关注。。 MongoDB URL链接 如何设置账号密码 假设你的账号是root,你的密码也是root,则 mongodb://username:passwordlocalhost:27017完美,再见。

探索LLM在图上学习的潜力10.14 暂停

探索LLM在图上学习的潜力 摘要介绍初步知识 摘要 Learning on Graph已经引起了极大的关注,因为它在现实世界中有广泛的应用。在具有文本节点属性的图形上进行学习的最流行的流程主要依赖于图神经网络(GNN),并利用浅层文本嵌入作为…

Maven系列第8篇:大型Maven项目,快速按需任意构建

本篇涉及到的内容属于神技能,多数使用maven的人都经常想要的一种功能,但是大多数人都不知道如何使用,废话不多说,上干货。 需求背景 我们需要做一个电商项目,一般都会做成微服务的形式,按业务进行划分&am…

【LeetCode 算法专题突破】滑动窗口(⭐)

文章目录 前言1. 长度最小的子数组题目描述代码 2. 无重复字符的最长子串题目描述代码 3. 最大连续1的个数 III题目描述代码 4. 将 x 减到 0 的最小操作数题目描述代码 5. 水果成篮题目描述代码 6. 找到字符串中所有字母异位词题目描述代码 7. 串联所有单词的子串题目描述代码 …

关于我对 jeecg-boot 的项目理解、使用心得和改进建议

一句话总结: JeecgBoot帮助我提升了后端技术水平,入门了前端,让我在公司内部慢慢能够成长为全栈开发。 一、项目理解 JeecgBoot 项目的核心理念是快速开发、低代码、易扩展。它采用了前后端分离的架构,后端使用Spring Boot Myba…

用节点亲和性把 Pod 分配到节点

用节点亲和性把 Pod 分配到节点 当前集群信息: rootk8s-master:~# kubectl get node -o wide NAME STATUS ROLES AGE VERSION INTERNAL-IP EXTERNAL-IP OS-IMAGE KERNEL-VERSION CONTAINER-RUNTIME k8s…

微信小程序OA会议系统数据交互

前言 经过我们所写的上一文章:微信小程序会议OA系统其他页面-CSDN博客 在我们的是基础面板上面,可以看到出来我们的数据是死数据,今天我们就完善我们的是数据 后台 在我们去完成项目之前我们要把我们的项目后台准备好资源我放在我资源中&…

学习笔记---0基础+干货满满的单链表专题~~

目录​​​​​​​ 1. 链表的概念及结构👑 1.1 什么是链表?👀 1.2 为什么需要链表?⁉️ 1.3 链表的结构是怎么样的?❓ 2. 链表的分类🦜 3. 实现单链表🫵 3.1 要实现的目标🎯…

JS加密/解密之闭包的运用

深入探讨JavaScript闭包的演变与应用 摘要: 本文将深入探讨JavaScript闭包的概念、特性以及其在实际开发中的应用。我们将从闭包的起源开始,探讨它在JavaScript编程中的重要性,并通过实例展示闭包在不同场景下的灵活应用。 引言 JavaScrip…

第一个Vue程序

首先下载vue.min.js或者vue.js Installation — Vue.js 在web文件下创建js文件并把vue.js复制到此文件。 创建一个jsp文件 显示界面

自然语言处理---Transformer机制详解之GPT模型介绍

1 GPT介绍 GPT是OpenAI公司提出的一种语言预训练模型.OpenAI在论文<< Improving Language Understanding by Generative Pre-Training >>中提出GPT模型.OpenAI后续又在论文<< Language Models are Unsupervised Multitask Learners >>中提出GPT2模型.…

如何使用visual studio 2010构建SQLite3.lib文件

sqlite3官网只提供了dll&#xff0c;并没有lib文件。需要自己生成sqlite3.lib。因项目升级到x64&#xff0c;以前并没有生成64位的链接库&#xff0c;需要自己创建。本人电脑操作系统windows 10, 开发环境为visual studio 2010。下面是详细生成过程。 1. 从源下载源&#xff08…

Spring中静态代理设计模式

目录 一、为什么需要代理设计模式 二、代理设计模式 三、静态代理设计模式 3.1 存在的问题 一、为什么需要代理设计模式 在项目的开发过程中我们知道service层是整个项目中最重要的部分&#xff0c;在service中一般会有两个部分&#xff0c;一个是核心业务&#xff0c;一个是额…

力扣每日一题54:螺旋矩阵

题目描述&#xff1a; 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5]示例 2&#xff1a; 输入&#…

mk语法示例

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

『ARM』和『x86』处理器架构解析指南

前言 如果问大家是否知道 CPU&#xff0c;我相信不会得到否定的答案&#xff0c;但是如果继续问大家是否了解 ARM 和 X86 架构&#xff0c;他们的区别又是什么&#xff0c;相信可能部分人就会哑口无言了 目前随着深度学习、高性能计算、NLP、AIGC、GLM、AGI 的技术迭代&#…

自然语言处理---RNN、LSTM、GRU模型

RNN模型 RNN模型概述 RNN(Recurrent Neural Network)&#xff0c;中文称作循环神经网络&#xff0c;它一般以序列数据为输入&#xff0c;通过网络内部的结构设计有效捕捉序列之间的关系特征&#xff0c;一般也是以序列形式进行输出。RNN的循环机制使模型隐层上一时间步产生的…

MSP430F5529时钟系统配置

1、为什么要进行时钟管理&#xff1f;   时钟系统是一个数字器件的命脉&#xff0c;对于普通的51单片机来说&#xff0c;它的时钟来源只有外部晶振&#xff0c;然后每12个振荡周期完成一个基本操作&#xff0c;所以也叫做12T单片机&#xff0c;但对于当前高级一点的单片机来…