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位进程用户态虚拟地址和内核态虚拟地址的划分 …

引用折叠、万能引用、右值引用、move、完美转发

大家好,我叫徐锦桐,个人博客地址为www.xujintong.com。平时记录一下学习计算机过程中获取的知识,还有日常折腾的经验,欢迎大家来访。 在写STL源码的时候遇到的问题,在这里写一篇笔记记录一下。 一、引用折叠 引用折叠…

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

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

【单元测试】--测试驱动开发(TDD)

一、什么是测试驱动开发 测试驱动开发(Test-Driven Development,TDD)是一种软件开发方法,其核心思想是在编写实际代码之前,首先编写测试用例。TDD 的主要步骤如下: 编写测试用例:首先&#xf…

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…

cuda PyTorch

1. GPU对应的CUDA版本 nvidia-smi CUDA Version: 12.2 GPU diver 大于cuda toolkit, pytorch 版本根据cuda toolkit 2. 查看nvcc的版本(即cuda toolkit 版本) nvcc --version Cuda compilation tools, release 12.2, V12.2.91 Build cud…

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

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

element-table + el-pagination 实现分页多选功能

首先&#xff0c;在 el-table 中添加 :row-key“getRowKeys” 和 selection-change 事件&#xff08;当选择项发生变化时会触发该事件&#xff09;。然后&#xff0c;给多选框的一列添加 :reserve-selection“true”。 <!-- 表格 --> <div><el-table class&quo…

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

目录​​​​​​​ 1. 链表的概念及结构&#x1f451; 1.1 什么是链表&#xff1f;&#x1f440; 1.2 为什么需要链表&#xff1f;⁉️ 1.3 链表的结构是怎么样的&#xff1f;❓ 2. 链表的分类&#x1f99c; 3. 实现单链表&#x1faf5; 3.1 要实现的目标&#x1f3af;…

分布式唯一Id,它比GUID好

分布式唯一Id&#xff0c;它比GUID好 一、前言 分布式唯一Id&#xff0c;顾名思义&#xff0c;是指在全世界任何一台计算机上都不会重复的唯一Id。 在单机/单服务器/单数据库的小型应用中&#xff0c;不需要用到这类东西。但在高并发、海量数据、大型分布式应用中&#xff0c…

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

深入探讨JavaScript闭包的演变与应用 摘要&#xff1a; 本文将深入探讨JavaScript闭包的概念、特性以及其在实际开发中的应用。我们将从闭包的起源开始&#xff0c;探讨它在JavaScript编程中的重要性&#xff0c;并通过实例展示闭包在不同场景下的灵活应用。 引言 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模型.…

langchain sql agent 案例

原文&#xff1a;SQL 数据库 |&#x1f99c;️&#x1f517; 朗链 (langchain.com)langchainSQL 数据库 |&#x1f99c;️&#x1f517; 朗链 (langchain.com) 说明&#xff1a;看原文&#xff0c;复制有问题 SQL Database This notebook showcases an agent designed to in…

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

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