React获取数据后HTML select标签不渲染，useEffect引发无限循环

核心问题分析 #

1. 异步逻辑失效：set_roles函数中，get_roles()的Promise异步执行，但函数会在Promise完成前就返回空的temp_data，导致role_options始终是空数组，无法渲染下拉项。
2. map未返回渲染元素：role_options.map的回调使用了大括号却没有返回<li>元素，最终map生成的是全为undefined的数组，自然无法渲染出选项。
3. 无限循环诱因：将role_options加入useEffect依赖后，每次setRoleOptions都会更新role_options，触发useEffect重新执行，再次调用setRoleOptions，形成死循环。

修复后的代码 #

// necessary imports
import { useState, useEffect } from 'react';

function Home(props){
     const [role_options, setRoleOptions] = useState([]) 
     const [is_loading, setIsLoading] = useState(true)

     useEffect(()=>{
        // 直接处理异步请求，确保数据返回后再更新状态
        const fetchRoles = async () => {
            try {
                const roleData = await get_roles();
                // 转换数据格式并更新状态
                const formattedRoles = roleData.map((role, index) => ({
                    key: index,
                    text: role,
                    value: role
                }));
                setRoleOptions(formattedRoles);
            } catch (error) {
                console.error('获取角色列表失败:', error);
            } finally {
                // 无论请求成功或失败，都结束加载状态
                setIsLoading(false);
            }
        };

        fetchRoles();
     },[])   

     if(is_loading) return <div>Loading......</div>

     return(
         <ul className="dropdown-menu">
             {role_options.map((role) => (
                 // 隐式返回JSX元素，确保map生成有效渲染数组
                 <li key={role.key}>{role.text} {role.value}</li>
             ))}
         </ul>
     )
}
export default Home

关键修复说明 #

• 异步请求正确处理：使用async/await封装请求逻辑，等待get_roles()返回数据后再格式化并更新role_options，确保状态能拿到有效数据。
• 修复map渲染逻辑：将map回调的大括号改为小括号，利用箭头函数的隐式返回特性，确保每个迭代都返回<li>元素，生成可渲染的JSX数组。
• 避免无限循环：保持useEffect的依赖为空数组[]，确保请求仅在组件首次挂载时执行一次，不会重复触发。
• 完善错误处理：添加try/catch/finally，在请求失败时打印错误信息，并在最终结束加载状态，避免组件一直卡在加载中。

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