React中使用Context API获取用户详情数据失败的问题排查与解决方案

安全阿岳

2026-4-27

我来帮你梳理下这个问题的根源和你的修复思路——你遇到的核心是415 Unsupported Media Type错误，再加上Context的依赖配置和数据处理问题，才导致了Context返回空的情况。

问题根源拆解

415错误本质：服务器返回这个错误是因为它无法识别你发送的请求媒体类型。你的WebAPI控制器用了[FromBody]string mail，要求请求的Content-Type必须是application/json，但Axios直接发送字符串时，默认的请求头可能不符合要求，导致服务器无法解析请求体。
Context依赖缺失：原来的GetUserDetailsContext里的useEffect依赖数组是空的，组件挂载后只会执行一次请求，但此时mail可能还没从setUserDetailsContext中获取到（比如登录完成后才设置mail），所以请求发送的是空值，自然拿不到数据。
响应数据处理错误：你直接把Axios的整个response对象存到了state里，但实际用户数据是在response.data字段中，这也会导致后续使用user时拿不到正确内容。

修复方案

我看到你已经通过合并Context和调整Axios请求解决了问题，这里把关键修复点再明确下：

1. 合并Context，统一管理用户状态

把分散的getUserDetails和setUserDetailsContext合并成单一的userContext，避免跨Context依赖的时序问题，让状态管理更集中：

// userContext.js
import { createContext, useContext, useState } from "react";
const userContext = createContext()

export const UserProvider = ({ children }) => {
 const[mail, setMail] = useState()
 const[password,setPassword] = useState()
 const [user, setUser] = useState({})
 const values = { user, setUser,password,setPassword,mail, setMail }
 
 return (
  <userContext.Provider value={values}>
    {children}
  </userContext.Provider>
 )
}

export const UseUserContext = () => useContext(userContext);

2. 修正Axios请求配置

添加正确的Content-Type请求头，确保服务器能解析请求体，同时正确提取响应中的data字段：

// Login.js中更新后的请求
axios.post(url, mail, {
 headers: {
  "content-type": "application/json",
 },
})
.then(response =>{
 setUser(response.data); // 取response.data而非整个response对象
 localStorage.setItem("userMail", response.data.mail);
})

3. 确保请求触发时机正确

合并Context后，你可以在需要获取用户详情的组件中，通过useEffect监听mail的变化来触发请求，确保mail存在时才发送请求：

const { mail, setUser } = UseUserContext();
useEffect(() => {
  if(mail) { // 避免mail为空时发送无效请求
    axios.post(url, mail, {
      headers: { "content-type": "application/json" },
    }).then(res => setUser(res.data));
  }
}, [mail]); // 依赖mail，当mail更新时自动重新请求

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