React中网络请求有响应但控制台打印空数组问题咨询

核心问题1：异步请求未正确处理 #

你的代码里直接同步调用salesService.getAllCustomers()，但API请求属于异步操作，该方法实际返回的是Promise对象，而非直接的响应数据。这会导致response.status无法正确匹配，setAllCustomers根本没执行，allCustomers始终是初始的空数组。

核心问题2：setState的异步特性 #

就算请求处理正确，console.log(allCustomers)在setAllCustomers后立即执行也拿不到更新后的值——React的setState是异步批量更新机制，状态不会在调用后立刻改变。

修正后的代码 #

const NormalDetails = (props) => {
  const [allCustomers, setAllCustomers] = useState([]);

  // 监听allCustomers状态变化，打印更新后的数据
  useEffect(() => {
    console.log("当前allCustomers数据:", allCustomers);
  }, [allCustomers]);

  useEffect(() => {
    // 标记为异步函数，用await处理Promise
    const getAllCustomers = async () => {
      try {
        const response = await salesService.getAllCustomers();
        if (response.status === 200) {
          setAllCustomers(response.data.object);
        }
      } catch (error) {
        // 打印具体错误信息，方便排查问题
        console.error("获取数据失败:", error);
      }
    };

    getAllCustomers();
  }, []); 
};

关键说明 #

1. 异步请求处理：给getAllCustomers添加async关键字，用await等待salesService.getAllCustomers()的Promise完成，确保拿到真实的响应数据。
2. 查看更新后的状态：新增依赖allCustomers的useEffect，当状态更新时自动触发，此时打印的就是最新的allCustomers值。
3. 错误排查优化：把console.log改成console.error并打印具体错误对象，便于定位请求失败的原因（比如响应格式错误、权限问题等）。

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