本文详解如何正确调用异步 API 并将响应数据从自定义 Hook 或工具函数传递至 React 组件，避免因 Promise 未 await 导致的 data.map is not a function 错误。

本文详解如何正确调用异步 api 并将响应数据从自定义 hook 或工具函数传递至 react 组件，避免因 promise 未 await 导致的 `data.map is not a function` 错误。

在 React 中，将 Axios 请求逻辑抽离到独立模块（如 UserAPI.ts）是良好实践，但必须确保调用方正确处理 Promise 的异步特性。原始代码中，getUsers() 返回的是一个 Promise 对象，而 setData(users) 直接将其赋值给 state，导致 data 变为 Promise 实例而非数组——因此后续 data.map() 报错。

✅ 正确做法：异步函数 + await + useEffect

首先，修正 API 函数，使其显式返回解析后的数据：

// networking/UserAPI.ts
import axios from "axios";

export const getUsers = async (): Promise<any[]> => {
  try {
    const response = await axios.get("http://localhost:3001/users");
    return response.data; // ✅ 确保返回实际数据（如用户数组）
  } catch (error) {
    console.error("Error fetching users:", error);
    throw error;
  }
};

⚠️ 注意：async 函数默认返回 Promise，await 是在调用端使用的关键词，不是定义端的语法糖。函数体中 return response.data 会自动包装为 Promise<any[]>，调用时必须 await。

Auth0 React Native

用于在React Native或Expo移动应用（iOS/Android）中添加生物识别认证——集成react-native-auth0 SDK与原生深度...

下载

其次，在组件中在 useEffect 内部定义并立即执行异步函数，确保 setData 接收的是已解析的数组：

// App.tsx
import React, { useState, useEffect } from 'react';
import { getUsers } from './networking/UserAPI'; // ✅ 路径需准确

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

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const users = await getUsers(); // ✅ await 等待 Promise 解析
        setData(users); // ✅ users 是数组，可安全 map
      } catch (error) {
        console.error('Failed to load users:', error);
      }
    };

    fetchUsers(); // ✅ 立即调用
  }, []); // ✅ 空依赖数组，仅组件挂载时执行

  return (
    <div>
      <h1>Home</h1>
      <ul>
        {data.length > 0 ? (
          data.map(user => <li key={user.id}>{user.name}</li>)
        ) : (
          <li>Loading or no users found...</li>
        )}
      </ul>
    </div>
  );
}

export default App;

? 关键要点总结

• ❌ 错误模式：const users = getUsers(); setData(users) → users 是 Promise，非数组；
• ✅ 正确模式：const users = await getUsers(); setData(users) → users 是 response.data（如 [{id:1,name:"A"},...]）；
• ? useEffect 内不可直接 await，必须包裹在立即执行的异步函数中；
• ?️ 始终添加 try/catch 处理网络异常，防止未捕获错误中断渲染；
• ? 建议为 getUsers 添加 TypeScript 类型（如 Promise<User[]>），提升类型安全；
• ? 进阶可封装为自定义 Hook（如 useUsers()），复用数据获取逻辑。

遵循以上结构，即可安全、清晰地在组件间共享 Axios 请求结果，杜绝“map is not a function”类运行时错误。