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),也是表单提交。所以会提交两次,

真的是大意了,

相关推荐
阿捞22 分钟前
python-langchain框架(3-20-智能问答ZeroShot_ReAct Agent 从零搭建)
python·react.js·langchain
小江的记录本10 分钟前
【JEECG Boot】 JEECG Boot 数据字典管理——六大核心功能(内含:《JEECG Boot 数据字典开发速查清单》)
java·前端·数据库·spring boot·后端·spring·mybatis
小江的记录本10 分钟前
【JEECG Boot】 JEECG Boot——Online表单 系统性知识体系全解
java·前端·spring boot·后端·spring·低代码·mybatis
John_ToDebug11 分钟前
Chromium 页面类型与 IPC 通信机制深度解析
前端·c++·chrome
Fanfffff72012 分钟前
前端进阶:从请求竞态到并发控制(系统学习笔记)
前端·笔记·学习
大、男人13 分钟前
edge浏览器打开baidu.com很慢,我是如何解决的
前端·edge
吴声子夜歌14 分钟前
ES6——函数的扩展详解
前端·ecmascript·es6
斌味代码15 分钟前
Next.js 14 App Router 完全指南:服务端组件、流式渲染与中间件实战
开发语言·javascript·中间件
有趣的老凌15 分钟前
一篇文章带你了解 Agent Skills —— 告别AI“失控”
前端·agent·claude
~ rainbow~18 分钟前
前端转型全栈(二)——NestJS 入门指南:从 Angular 开发者视角理解后端架构
前端·javascript·angular.js