如何在useEffect中异步获取数据并解决响应返回前渲染、state为undefined问题

• 异步请求执行顺序问题：fetchPositions是异步函数，调用后不会阻塞后续代码执行，console.log运行时接口请求还没返回，setPositions还未被调用，此时拿到的还是作用域内的旧state值。
• React状态更新机制：就算接口请求立刻返回，setPositions本身也是异步批量更新的，调用后不会立刻修改当前渲染周期内的positions变量，要等到下一次组件重渲染才能拿到更新后的值。
• 页面提前渲染是默认行为：组件初始渲染时不会等待useEffect里的异步请求完成，你如果没有做加载态判断，就会用初始的空数组渲染内容，出现你说的响应没返回就渲染完成的情况。

1. 加加载态控制渲染时机 #

新增loading状态控制页面渲染逻辑，避免接口返回前渲染异常：

const [positions, setPositions] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
    const fetchPositions = async () => {
        try {
            const response = await EmployeeService.getEmployeePositions();
            // 可以先打印完整返回检查结构，避免字段取错
            console.log('接口完整返回：', response)
            setPositions(response.data ?? []);
        } catch (err) {
            setError(err);
            console.error('获取职位数据失败：', err)
        } finally {
            setLoading(false);
        }
    };
    fetchPositions();
}, []);

页面渲染部分加判断：

// 加载中显示占位
if (loading) return <div>数据加载中...</div>
// 报错提示
if (error) return <div>数据加载失败，请稍后重试</div>
// 加载完成后再渲染实际业务内容
return (
    <div>
        {positions.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
)

2. 正确查看更新后的state值 #

不要在调用setState后立刻打印当前作用域的state，改用以下两种方式：

• 把打印逻辑放到组件顶层，每次组件重渲染都会输出最新的state：

const [positions, setPositions] = useState([]);
console.log('当前最新positions：', positions);

• 用useEffect监听positions的变化，值更新后触发回调：

useEffect(() => {
    console.log('positions更新完成，最新值：', positions);
}, [positions])

额外排查点 #

如果state更新后还是拿到undefined，先检查接口返回结构是否符合预期，确认response.data是否真的存在，很多时候是接口返回的嵌套结构和预期不一致导致取值错误。

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