React TypeScript中Axios POST响应数据无法访问问题求助

我在React TypeScript项目中使用Axios发送创建用户的POST请求，预期能从响应中获取用户名、密码和邮箱，但访问这些属性时总是返回undefined，无法进行后续操作。

简化后的业务代码 #

createUser = async(data: CreateUser) =>{
  try {
    await agent.createUser.create1(data, data.profilePhoto!).then((res) =>{
      // 解构响应结果
      const {
        request,
        config,
        data,
        status,
        headers,
        statusText
      } = res;
      runInAction(() =>{
        // #1 将响应存入userResponse，控制台显示为Proxy类型
        this.userResponse = res;
        console.log(this.userResponse?.data)
      })
      // #2 直接打印解构的data能显示完整数据
      console.log(data);

    });
    runInAction(() =>{
      this.loadUser({
        pageIndex: 0,
        pageSize: 5
      });
    });
  } catch(error) {
    console.log(error);
  }
};

控制台输出 #

• #1 输出（Proxy对象）：
  
• #2 输出（原始数据）：
  

Axios请求封装代码（agent） #

create1: (data: CreateUser, file: Blob) =>{
    let formData = new FormData()
    formData.append("profilePhoto", file)
    formData.append("userName", data.userName)
    formData.append("email", data.email)
    formData.append("password", 'abc@123')
    formData.append("phoneNumber", data.phoneNumber)
    formData.append("language", data.language)
    formData.append("positionTitle", data.positionTitle)
    formData.append("userRoles", data.userRoles!.toString())
    formData.append("allowedDepartments", data.allowedDepartments!.toString())
    formData.append("allowedSecurityLevels", data.allowedSecurityLevels!.toString())
    formData.append("allowedDocumentType", data.allowedDocumentType!.toString())
    formData.append("departmentId", data.departmentId.toString())
    formData.append("organizationId", data.organizationId.toString())
    return axios.post<CreateUser, any>('/User/CreateUser', formData, {
      headers: {"Content-type": "multipart/form-data"},
    })  
  },

响应数据接口定义 #

export interface responseCode{
    code: number;
    message: string;  
    data: {
        email: string;
        password: string;
        userName: string;
    };
}

问题分析与解决方案 #

1. 修正Axios泛型类型错误 #

Axios.post的泛型参数顺序是：响应数据类型在前，请求配置类型在后。你当前写的axios.post<CreateUser, any>把请求数据类型和响应类型搞反了，导致TypeScript无法正确推断响应结构。

修改agent中的请求代码：

return axios.post<responseCode>('/User/CreateUser', formData, {
  headers: { "Content-type": "multipart/form-data" },
})

2. 处理MobX代理对象问题 #

你将res直接赋值给MobX的可观察属性this.userResponse后，对象会被MobX包装成Proxy代理对象，直接打印或访问时会显示Proxy结构，但实际数据是存在的。解决方式有两种：

• 浅拷贝解除代理：

  runInAction(() => {
    this.userResponse = { ...res }; // 浅拷贝后存储，避免代理
    console.log(this.userResponse.data.data.email); // 按层级访问
  })
  

• 直接使用解构后的原始数据：
  解构得到的data是未被代理的原始响应数据，直接用它进行后续操作即可：

  runInAction(() => {
    console.log(data.data.email); // 正确访问邮箱
    console.log(data.data.userName); // 正确访问用户名
  })
  

3. 注意响应数据的层级结构 #

从控制台#2的输出可以看到，响应数据的结构是{ code:..., message:..., data: {...} }，也就是你要的用户数据在res.data.data层级下，必须按照这个层级访问，否则会得到undefined。

总结 #

1. 修正Axios请求的泛型类型，指定响应为responseCode
2. 避免直接使用被MobX代理的响应对象，改用解构后的原始数据或浅拷贝后的对象
3. 按照res.data.data.xxx的层级访问用户属性

内容的提问来源于stack exchange，提问作者Mohammad Samim Safi