React中AuthController函数返回值始终为undefined问题求助

核心问题分析 #

你的函数返回undefined的原因有两个：

1. useEffect异步执行特性：组件初始化时，output还未被赋值就先返回了，后续getData()完成后对output的赋值不会触发组件重新渲染，外部无法获取更新后的值。
2. 违反React状态管理规则：直接修改普通变量output不会触发React的状态更新机制，组件无法感知到值的变化。

解决方案：改用自定义Hook管理状态 #

因为你的逻辑依赖React的useState和useEffect，最合理的方式是封装成自定义Hook（命名以use开头，符合React Hook规则），用状态变量管理校验结果：

import axios from "axios";
import { useState, useEffect } from 'react';

// 自定义Hook：用于获取并管理登录校验状态
export const useAuthController = () => {
    // 初始化状态：默认处于校验中
    const [authStatus, setAuthStatus] = useState({
        status: null,
        data: null,
        error: false
    });

    useEffect(() => {
        // 把异步请求逻辑封装在useEffect内部
        const checkAuth = async () => {
            const token = localStorage.getItem("imtakilogintoken");
            try {
                const res = await axios({
                    url: 'http://localhost:3005/profile',
                    method: 'post',
                    timeout: 8000,
                    data: { data: token },
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                // 更新状态，触发组件重新渲染
                setAuthStatus({
                    status: res.status,
                    data: res.data,
                    error: false
                });
            } catch (err) {
                setAuthStatus({
                    status: false,
                    data: false,
                    error: err
                });
            }
        };

        checkAuth();
    }, []); // 空依赖数组：仅在组件挂载时执行一次

    return authStatus;
};

组件中使用方式 #

在需要校验登录状态的组件中调用这个Hook，根据状态处理渲染逻辑：

import { useAuthController } from './path-to-your-file';

function UserProfile() {
    const authStatus = useAuthController();

    // 校验中状态
    if (authStatus.status === null) {
        return <div>验证登录状态中...</div>;
    }

    // 校验失败状态
    if (authStatus.error) {
        return <div>登录验证失败：{authStatus.error.message}</div>;
    }

    // 校验完成，根据结果渲染
    return (
        <div>
            {authStatus.data ? '已登录' : '未登录'}
        </div>
    );
}

备选方案：直接返回Promise #

如果不需要Hook特性，也可以将函数改为直接返回Promise，在组件中手动处理异步逻辑：

import axios from "axios";

export const authController = async () => {
    const token = localStorage.getItem("imtakilogintoken");
    try {
        const res = await axios({
            url: 'http://localhost:3005/profile',
            method: 'post',
            timeout: 8000,
            data: { data: token },
            headers: {
                'Content-Type': 'application/json',
            }
        });
        return {
            status: res.status,
            data: res.data,
            error: false
        };
    } catch (err) {
        return {
            status: false,
            data: false,
            error: err
        };
    }
};

组件中使用：

import { useState, useEffect } from 'react';
import { authController } from './path-to-your-file';

function UserProfile() {
    const [authStatus, setAuthStatus] = useState(null);

    useEffect(() => {
        authController().then(status => {
            setAuthStatus(status);
        });
    }, []);

    // 后续渲染逻辑同前...
}

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