useEffect组件挂载时获取数据无法及时更新状态的修正方案

打印得到空数组不是请求失败、也不是状态赋值没生效，是踩了React状态机制的典型坑：

• React的setState是异步调度更新的，调用后不会同步修改当前执行上下文里的状态变量。你在接口回调里调用setDineIns(info)后立刻打印dineIns，读到的是当前effect闭包捕获的初始状态值——也就是定义时的空数组[]，更新后的状态只有组件触发下一次重渲染时才会生效。
• 原代码混写async/await和.then链式调用，同时存在hook依赖缺失、无接口错误处理、组件无返回内容的问题，不符合React开发规范。

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router';
import jwtDecode from 'jwt-decode';

function CheckIns() {
  const [dineIns, setDineIns] = useState([]);
  const navigate = useNavigate();

  // 数据请求逻辑
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (!token) {
      navigate('/login');
      return;
    }

    const user = jwtDecode(token);
    if (!user) {
      localStorage.removeItem('token');
      navigate('/login');
      return;
    }

    const fetchUserData = async (user_email) => {
      try {
        const res = await axios.get(`/api/users/${user_email}`);
        const reservations = res.data.reservations;
        setDineIns(reservations);
        // 要验证请求结果直接打印拿到的源数据即可，不要读当前闭包的旧状态
        console.log('接口返回的预约数据：', reservations);
      } catch (err) {
        console.error('用户数据请求失败：', err);
        // 处理鉴权失败场景
        if (err.response?.status === 401) {
          localStorage.removeItem('token');
          navigate('/login');
        }
      }
    };

    fetchUserData(user.email);
  }, [navigate]); // 补全hook依赖项，符合React Hooks规则

  // 如果需要监听状态变化执行逻辑，单独写依赖dineIns的effect
  useEffect(() => {
    console.log('dineIns状态已更新为：', dineIns);
  }, [dineIns]);

  // 补全组件渲染返回
  return (
    <div className="checkins-container">
      {dineIns.map(item => (
        <div key={item.id} className="reservation-card">
          {/* 这里写你的预约项业务渲染逻辑 */}
        </div>
      ))}
    </div>
  );
}

export default CheckIns;

• 不要在调用setState的同一个同步上下文里读取状态值，此时读到的永远是当前渲染周期的旧值。如果要确认赋值结果，要么直接打印接口返回的原始数据，要么通过依赖对应状态的useEffect监听更新。
• 异步请求统一用async/await或者.then其中一种写法即可，混写会增加逻辑复杂度，提高出bug的概率。
• 所有接口请求必须加错误捕获，避免请求失败时页面直接白屏，同时可以在错误处理里兼容鉴权过期、服务端异常等边界场景。
• useEffect里用到的外部变量（比如navigate）要加到依赖数组里，避免闭包引用旧值导致隐蔽bug。

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