React PUT请求无法更新Django后端用户数据问题求助

我帮你梳理下这个问题，核心原因应该是请求体格式和Content-Type不匹配，这也是Postman能正常更新但React前端不行的关键所在，另外还有异步逻辑的小问题需要调整，具体如下：

1. 核心问题：Content-Type与请求体格式不兼容 #

你在请求头里设置了"Content-Type": "application/x-www-form-urlencoded"，但请求体却用JSON.stringify()把数据转成了JSON字符串——这就矛盾了：

• Django后端看到application/x-www-form-urlencoded时，会期望接收类似email=xxx&username=yyy的表单键值对格式
• 但你传的是JSON字符串，后端根本解析不到有效数据，所以会返回成功提示，但实际没有更新任何内容（Postman里你应该是用表单格式发送的，所以能正常工作）

两种修复方案选其一： #

方案A：保持Content-Type为表单格式，修改请求体为URLSearchParams

把body部分改成表单编码格式：

body: new URLSearchParams({
  email: userinfo.email,
  username: userinfo.username,
  first_name: userinfo.first_name,
  last_name: userinfo.last_name,
})

方案B：把Content-Type改成JSON格式，保留JSON.stringify

如果你的Django后端支持接收JSON格式的请求（比如用了rest_framework.parsers.JSONParser），可以直接修改请求头：

headers: {
  "Content-Type": "application/json", // 改成JSON格式
  Authorization: "Token " + cookies.get("token"),
  "X-CSRFToken": csrftoken,
},
body: JSON.stringify({
  email: userinfo.email,
  username: userinfo.username,
  first_name: userinfo.first_name,
  last_name: userinfo.last_name,
}),

2. 异步逻辑优化：加载状态更新时机错误 #

你现在的setIsLoading(false)直接写在fetch后面，会导致请求还没完成，加载状态就立刻变成false，这会影响交互体验。应该把它放到异步回调里：

fetch(url, { /* 你的请求配置 */ })
.then((response) => {
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }
  return response.json();
})
.then((data) => {
  console.log("更新成功返回数据:", data);
  setIsLoading(false);
})
.catch((error) => {
  console.error("更新出错:", error);
  setIsLoading(false);
});

这样不管请求成功还是失败，加载状态都会正确更新，还能捕获到潜在的错误信息。

3. 额外建议：确认后端的PUT接口逻辑 #

虽然Postman能正常工作，但可以再检查下Django后端的更新接口：

• 确保接口正确处理了PUT请求的参数
• 确认更新后执行了save()操作，且没有被其他逻辑覆盖

先解决第一个核心问题，应该就能让前端的更新请求生效了。

内容的提问来源于stack exchange，提问作者Zett