如何在React组件间使用Axios GET响应？解决data.map报错问题

错误根源 #

你的代码存在两个核心问题导致报错：

1. getUsers 是异步函数，直接调用 getUsers() 得到的是Promise对象，而非实际的用户数组。将Promise赋值给data后，调用data.map()必然报错——因为Promise没有map方法。
2. getUsers 函数内部未正确返回数据：await axios.get(...).then(res => res.data) 里的return res.data仅在then回调内生效，没有传递到外层async函数，导致getUsers实际返回的是一个resolve为undefined的Promise。

修复方案 #

1. 修正 networking/UserAPI.ts 的数据返回逻辑

确保异步函数正确返回请求到的数组数据：

import axios from "axios";

export const getUsers = async () => {
  // 直接等待请求完成，返回响应数据
  const response = await axios.get(`http://localhost:3001/users`);
  return response.data;

  // 也可以用链式调用方式（无需await）：
  // return axios.get(`http://localhost:3001/users`).then(res => res.data);
};

2. 在 App.tsx 中正确处理异步请求

useEffect 的回调不能直接设为async函数，需要在内部封装异步逻辑并调用，同时用await等待Promise解析后再更新状态：

import React, { useState, useEffect } from 'react';
import { getUsers } from "./networking/UserAPI";

function App() {
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    // 定义内部异步函数处理请求
    const fetchUserData = async () => {
      try {
        const users = await getUsers();
        // 校验返回结果是否为数组，避免后续报错
        if (Array.isArray(users)) {
          setData(users);
        } else {
          console.error("接口返回的数据格式错误，不是数组");
        }
      } catch (err) {
        console.error("获取用户数据失败:", err);
      }
    };

    fetchUserData();
  }, []);

  return (
    <div>
      <h1>Home</h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

核心注意点 #

• 带async关键字的函数返回值永远是Promise，必须用await或.then()获取实际结果。
• useEffect 回调若需处理异步逻辑，要在内部封装async函数，不能直接将回调设为async（会导致React无法正确处理清理逻辑）。
• 增加错误处理和数据格式校验，能提升代码健壮性，避免因接口返回异常导致页面崩溃。

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