ReactJS 使用useState时出现接口无限请求循环问题求助

• 你的写法不符合React函数组件的执行逻辑：函数组件在每次状态更新时都会重新执行整个函数体，你直接在组件顶层调用populateUser方法，该方法内部调用的setUserState、setLoading都会触发组件状态更新，进而触发组件重渲染，重渲染又会再次执行populateUser，最终形成死循环。
• 你的需求是组件加载完成后只请求一次用户信息，属于「组件挂载时执行的副作用」，需要用React的useEffect钩子来封装异步请求逻辑。

import { useState, useEffect } from 'react';

const AppLayout = () => {
    const [loading, setLoading] = useState(true);
    const [userState, setUserState] = useState(null);

    const populateUser = async () => {
        try {
            let profile_data = await UserService.findUser();
            const user = {"name": profile_data["name"]};
            setUserState(user);
        } catch (err) {
            // 可自行补充请求失败的处理逻辑，比如提示用户登录异常
            console.error('获取用户信息失败', err);
        } finally {
            setLoading(false);
        }
    }

    // 第二个参数传空数组，代表这个副作用仅在组件首次挂载完成后执行一次
    useEffect(() => {
        populateUser();
    }, []);

    return(
        <>
        {
            !loading && userState && <h1>{userState.name}</h1>
        }
        </>
    )
}

• 新增了可选的请求异常捕获逻辑，避免接口报错时页面直接崩溃
• 渲染逻辑新增了userState非空判断，避免请求失败时访问null的name属性出现运行时报错

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