React中async/await+Axios调用返回Promise pending状态问题排查

问题原因分析 #

1. 初始代码（useEffect内）的问题 #

• async函数本身会返回Promise对象，直接console.log(getFirstLevelCategoryData())打印的是未完成的Promise，而非最终返回的数据。你看到的pending是Promise的初始状态，后续会变为fulfilled，但直接打印不会等待Promise完成。
• 未处理Promise结果：既没有用await（需包裹在async函数内），也没有用.then()获取最终数据。

2. 更新后代码的问题 #

• 直接在组件渲染流程中调用异步函数：通过if (mainCategory.length === 0)触发getFirstLevelCategoryData()，违反React渲染逻辑——每次组件渲染都会执行该判断，异步请求完成后setMainCategory会更新状态、触发新一轮渲染，可能导致无限循环；且渲染阶段不允许执行副作用（如异步请求），会导致组件行为不稳定。
• Typeahead组件配置错误：你的mainCategory是字符串数组（如["Audio", ...]），但设置了labelKey="category"（数组元素无category属性），无法正确显示选项；同时onChange参数不是事件对象，react-typeahead的onChange返回选中的选项数组，e.target.value无效。

解决方案 #

步骤1：正确在useEffect中执行异步请求 #

将异步请求放在useEffect中，配置合理的依赖项，确保仅在必要时触发请求：

import { useState, useEffect } from 'react';
import axios from 'axios';
import { Typeahead } from 'react-bootstrap-typeahead';

// 状态声明
const [mainCategory, setMainCategory] = useState([]);
const [isLoading, setIsLoading] = useState(false);

// 异步请求函数
const getFirstLevelCategoryData = async () => {
  setIsLoading(true);
  try {
    const config = {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${userInfo.token}`,
      },
    };
    const { data } = await axios.get("/api/category/firstlevel", config);
    setMainCategory(data);
  } catch (error) {
    console.error("加载分类数据失败:", error);
    // 可添加用户提示逻辑，如setErrorMsg("加载失败，请重试")
  } finally {
    setIsLoading(false);
  }
};

// 控制请求触发时机
useEffect(() => {
  // 仅当分类为空且token存在时请求
  if (mainCategory.length === 0 && userInfo?.token) {
    getFirstLevelCategoryData();
  }
}, [mainCategory.length, userInfo?.token]);

步骤2：修复Typeahead组件配置 #

针对字符串数组调整组件参数：

{isLoading ? (
  <div>加载中...</div>
) : (
  <Typeahead
    id="basic-typeahead-single"
    // 字符串数组直接显示自身，无需labelKey
    onChange={(selected) => {
      // 单选模式下，selected是包含选中项的数组
      if (selected.length > 0) {
        console.log("选中分类:", selected[0]);
        // 可根据需求将选中值存入状态，如setSelectedCategory(selected[0])
      }
    }}
    options={mainCategory}
    placeholder="选择分类..."
    selected={[]} // 单选模式下默认空数组
  />
)}

关键注意事项 #

• 禁止在渲染阶段执行副作用：异步请求、状态更新等操作必须放在useEffect或事件处理函数中。
• 正确处理async函数：调用后必须用await或.then()获取结果，直接打印Promise只会得到pending状态。
• 精准设置useEffect依赖项：避免遗漏导致请求不触发，或冗余依赖导致重复请求。

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