React中user?.id初始加载为undefined致Axios请求失败求助

问题根源 #

你的核心问题在于：user?.id在组件首次挂载时还未完成赋值，但useEffect依赖为空数组，只会执行一次初始化逻辑，此时发起的Axios请求会携带undefined的id_p参数，直接导致请求失败。另外，不必要的setInterval会持续发起无效请求，浪费资源。

修复方案 #

1. 移除冗余轮询逻辑：若无需定时刷新数据，只需在user就绪后发起一次请求即可。
2. 监听user状态变化：将user加入useEffect的依赖数组，当user从undefined变为有效值时，自动触发请求。
3. 请求前校验user：在发起Axios请求前先判断user是否存在，彻底避免无效请求。

修改后的代码 #

import React, { useContext, useState, useEffect } from 'react';
import { MyContext } from '../../login/MyContext';
import axios from 'axios';

function Perfil() {
    const { user } = useContext(MyContext);
    const [data, setData] = useState([]);

    const peticionGet = async () => {
        // 先校验user是否存在，避免发起无效请求
        if (!user) return;
        
        try {
            const response = await axios.get(`https://aliraweb.com/apiAliraweb/perfil_img/index.php?id_p=${user.id}`);
            setData(response.data);
        } catch (error) {
            console.log(error);
        }
    };

    // 当user变化时触发请求，依赖数组加入user
    useEffect(() => {
        peticionGet();
        // 若业务需要定时刷新，可重新启用以下代码，但需保留user校验
        // const interval = setInterval(() => {
        //     peticionGet();
        // }, 2000);
        // return () => clearInterval(interval);
    }, [user]); // 依赖数组添加user，监听user变化

    if (!user) {
        return "";
    }

    return (
        <div>
            {console.log("变量加载正常：" + user.id)}
        </div>
    );
}

export default Perfil;

补充说明 #

• 若确实需要定时刷新数据，重新启用setInterval即可，但要确保每次调用peticionGet时都先校验user状态。
• 组件渲染逻辑已简化：直接判断!user返回空内容，否则渲染正常组件，无需多余的else if分支。

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