useEffect内读取useContext的userData为undefined导致axios调用失败如何解决

• 你当前useEffect的依赖数组为空，仅会在组件首次挂载阶段执行1次。如果你的userData是异步获取后存入UserContext的，组件首次挂载时userData还没有完成赋值，自然拿到的是初始值undefined。
• 后续UserContext中的userData更新后，因为没有被加入useEffect的依赖数组，useEffect不会重新触发执行，也拿不到最新的userData值。

• 把userData加入useEffect的依赖数组
• 增加非空判断，仅在userData存在时发起axios请求，避免调用接口时报错

修正后的代码如下：

/* 引入useState、useEffect */
import React, {useState, useEffect, useContext} from "react";
/* 引入Axios */
import axios from "axios";
/* 引入样式 */
import "./Badges.styles.scss";

/* 引入上下文 */
import {UserContext} from "../../../context/UserContext";


const Badges = () => {
  const {userData} = useContext(UserContext);
  console.log(userData);
  const [badges, setBadges] = useState()
  const [loading, setLoading] = useState(false)
  
  useEffect(()  => {
    // 增加非空判断，避免userData不存在时报错
    if (!userData?._id) return
    console.log(userData)
    axios.get(`/api/v1/user/gamification/${userData._id}`)
    .then(res => {
      setBadges(res.data);
    })
    .catch(err => console.log(err))
  },[userData]) // 把userData加入依赖数组，userData更新时重新执行
    
  return ( .....

• 可以给badges的useState设置初始默认值，比如空数组[]，避免渲染时因为没有数据报错
• 如果需要展示加载状态，可以在请求发起前设置setLoading(true)，请求完成（成功/失败）后设置setLoading(false)

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