React.js类组件集成Auth0后无法获取user属性值如何解决

问题原因 #

• 模板字符串语法使用错误：axios请求URL的模板字符串中没有用${}包裹变量，导致this.props.auth0.user.email被当做普通字符串传递给后端，而非实际的用户邮箱值，后端自然无法匹配到对应用户。
• 请求触发位置错误：getdata方法放在render函数中，render函数每次组件重渲染都会执行，会导致请求被重复触发，同时组件渲染初期Auth0还未完成用户信息异步加载，此时读取auth0.user就是undefined。
• 缺少Auth0状态判断：没有判断isLoading（加载状态）、isAuthenticated（登录状态）就直接读取user属性，大概率会在信息未加载完成时拿到undefined值。
• 状态类型不匹配：初始化userdata为数组，但后续请求拿到的是用户对象，渲染时直接读取userdata.pp等属性会出现异常。

解决方案 #

• 修正模板字符串的变量引用，用${}包裹要插入的props变量。
• 将请求触发逻辑移到componentDidMount生命周期函数中，避免重复触发请求。
• 发请求前先判断Auth0的加载状态和登录状态，确认用户信息存在后再发起请求。
• 初始化userdata为空对象，渲染时加可选链判断属性是否存在，避免白屏报错。
• 补充请求的错误捕获逻辑，方便定位问题。

修正后完整代码如下：

import React, { Component } from 'react'
import axios from "axios";
import { withAuth0 } from '@auth0/auth0-react'; // 移除多余的auth0导入

class Feed extends Component {
  constructor(props){
    super(props);
    this.state={
      userdata: {} // 调整初始值为对象，和接口返回类型匹配
    }
  }

  componentDidMount() {
    // 组件挂载完成后再触发请求
    this.getdata();
  }

  getdata = async() => {
    const { auth0 } = this.props;
    // 前置校验Auth0状态，确认用户信息存在再发请求
    if (auth0.isLoading || !auth0.isAuthenticated || !auth0.user?.email) return;
    try {
      // 修正模板字符串变量插入语法
      const res = await axios.get(`http://localhost:1177/getuser?email=${auth0.user.email}`);
      this.setState({
        userdata: res.data,
      });
    } catch (err) {
      // 自定义错误处理逻辑
      console.error('获取用户信息失败：', err);
    }
  };

  render() {
    // 渲染时加可选链，避免属性不存在时报错
    return (
      <div>
        <img src={this.state.userdata?.pp} alt={this.state.userdata?.username || '用户头像'} />
        <h1>{this.state.userdata?.username}</h1>
        <h1>{this.state.userdata?.email}</h1>
      </div>
    )
  }
}

export default withAuth0(Feed)

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