0

0

如何在 MERN 应用中正确使用 Axios 发送 PUT 请求更新嵌套文档

聖光之護

聖光之護

发布时间:2025-12-30 12:42:42

|

753人浏览过

|

来源于php中文网

原创

如何在 MERN 应用中正确使用 Axios 发送 PUT 请求更新嵌套文档

本文详解 mern 架构下 axios put 请求失败的典型原因——后端 api 期望接收嵌套字段(如 `datos_personales`),而前端未按约定结构封装数据,导致更新不生效;通过修正请求体结构即可解决。

在基于 MERN(MongoDB, Express, React, Node.js)构建的学生信息管理系统中,使用 axios.put() 更新学生数据时,常见错误并非网络或认证问题,而是前后端数据结构约定不一致。从你提供的日志和代码可见:前端成功发送了 perdatEvent 对象(含 fname、snumber、career 等字段),控制台也返回了响应数据,但数据库未实际更新——这强烈表明:后端路由并未将顶层字段直接映射到数据库文档,而是要求它们位于一个特定嵌套字段下(例如 datos_personales)

你的原始请求写法为:

await systemApi.put(`/events/${eventId}`, perdatEvent);

这意味着整个 perdatEvent 对象作为请求体的根对象被发送,例如:

{
  "fname": "Christian",
  "snumber": "18400282",
  "career": "Mehcatronic",
  ...
}

但根据你后端 API 的设计(从响应体 data.evento.datos_personales 可反推),它实际期望的是:

AskAI
AskAI

无代码AI模型构建器,可以快速微调GPT-3模型,创建聊天机器人

下载
{
  "datos_personales": {
    "fname": "Christian",
    "snumber": "18400282",
    "career": "Mehcatronic",
    ...
  }
}

✅ 正确的修复方式正是答案中指出的:显式将 perdatEvent 包裹进 datos_personales 字段中

const { data } = await systemApi.put(`/events/${eventId}`, {
  datos_personales: perdatEvent
});

✅ 补充最佳实践建议:

  • 始终查阅后端接口文档或源码:确认 RESTful 路由(如 /events/:id)对 PUT 请求体的结构要求(是扁平对象?还是带 data/payload/datos_personales 等包装字段?)。
  • 服务端验证不可省略:Express 后端应校验 req.body.datos_personales 是否存在且为对象,避免静默失败。
  • 前端增加类型提示(可选):若使用 TypeScript,可定义接口约束结构:
    interface UpdateEventPayload {
      datos_personales: {
        fname: string;
        snumber: string;
        career: string;
        // ... 其他字段
      };
    }
  • 调试技巧:在 Express 路由中临时添加 console.log(req.body),直观确认接收到的原始结构,比仅依赖前端日志更可靠。
⚠️ 注意:此问题与 Axios 配置(如 systemApi.interceptors)、Token 认证、CORS 或 MongoDB 模型定义无关——因为 GET 请求能正常返回 data.evento.datos_personales,证明链路通畅,核心矛盾在于 HTTP 请求体(payload)的语义结构不匹配。

通过这一处关键结构调整,PUT 请求即可精准命中后端更新逻辑,实现学生信息的可靠持久化。

相关专题

更多
PHP API接口开发与RESTful实践
PHP API接口开发与RESTful实践

本专题聚焦 PHP在API接口开发中的应用,系统讲解 RESTful 架构设计原则、路由处理、请求参数解析、JSON数据返回、身份验证(Token/JWT)、跨域处理以及接口调试与异常处理。通过实战案例(如用户管理系统、商品信息接口服务),帮助开发者掌握 PHP构建高效、可维护的RESTful API服务能力。

146

2025.11.26

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

6087

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

805

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

1062

2023.12.21

token什么意思
token什么意思

token是一种用于表示用户权限、记录交易信息、支付虚拟货币的数字货币。可以用来在特定的网络上进行交易,用来购买或出售特定的虚拟货币,也可以用来支付特定的服务费用。想了解更多token什么意思的相关内容可以访问本专题下面的文章。

1230

2024.03.01

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

534

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

17

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

15

2026.01.06

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

2

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.7万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号