ReactJS API数据加载失败：Promise异常问题求助

核心问题 #

1. 异步执行顺序错误：你在useEffect里同时调用loadData()和getData()，但loadData是异步请求，还没拿到orgID的时候getData就已经执行了，导致传给第二个接口的organizer_id是空字符串。
2. 状态更新的异步性：即使loadData先执行，setOrgID是异步操作，不会立刻更新orgID的值，所以直接在loadData之后调用getData也拿不到最新的orgID。
3. 缺少加载状态处理：没有设置加载状态，页面直接渲染，导致用户看到空白或旧数据，误以为页面已经加载完成。
4. useNavigate使用错误：你只是赋值了const navigate = useNavigate，但没有调用这个钩子，正确写法是const navigate = useNavigate();。
5. Axios参数格式错误：axios.post的第三个参数是配置对象，你把timeout和config分开传了，应该合并成一个配置对象。

修正后的代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

export default function UserDashboard() {
  const config = {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    timeout: 8000 // 把timeout合并到config里
  };

  const [APIData, setAPIData] = useState([]);
  const [orgEvents, setOrgEvents] = useState([]);
  const [orgID, setOrgID] = useState('');
  const [nameList, setNameList] = useState([]);
  const [isLoading, setIsLoading] = useState(true); // 新增加载状态
  const navigate = useNavigate(); // 正确调用useNavigate钩子

  axios.defaults.withCredentials = true;

  useEffect(() => {
    // 用一个异步函数包裹，保证执行顺序
    const fetchAllData = async () => {
      try {
        // 先获取用户ID
        const userRes = await axios.get('http://localhost:3001/api/userDashboard', config);
        if (userRes.data.valid) {
          setAPIData(userRes.data);
          setOrgID(userRes.data.userID);
          
          // 拿到orgID后再请求用户数据
          const eventsRes = await axios.post(
            'http://localhost:3001/api/getOrgEvents',
            { organizer_id: userRes.data.userID }, // 直接用返回的userID，不用等状态更新
            config
          );
          setOrgEvents(eventsRes.data);
        } else {
          navigate('/login');
        }
      } catch (err) {
        console.error('请求出错:', err);
      } finally {
        setIsLoading(false); // 不管成功失败，都结束加载状态
      }
    };

    fetchAllData();
  }, [navigate]); // 把navigate加入依赖数组

  // 加载状态下显示加载提示
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    // 你的页面内容，现在可以安全使用APIData和orgEvents了
    <div>
      {/* 渲染数据 */}
    </div>
  );
}

关键改进点 #

• 串行异步请求：用await保证先拿到用户ID，再请求用户数据，避免并行执行导致的参数错误。
• 直接使用响应数据：不用等setOrgID更新状态，直接用userRes.data.userID传给第二个接口，绕开React状态更新的异步性。
• 添加加载状态：用isLoading控制页面渲染，加载时显示提示，避免用户误以为页面加载完成。
• 修正Axios参数：把timeout合并到config里，符合Axios的参数格式。
• 正确使用useNavigate：调用钩子获取导航函数。
• 统一错误处理：用try/catch包裹所有异步操作，集中处理错误。

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