本文详解如何正确调用异步 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;
}
};</any>
⚠️ 注意：async 函数默认返回 Promise，await 是在调用端使用的关键词，不是定义端的语法糖。函数体中 return response.data 会自动包装为 Promise
，调用时必须 await。
其次，在组件中在 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;</any>
? 关键要点总结
- ❌ 错误模式：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
），提升类型安全； - ? 进阶可封装为自定义 Hook（如 useUsers()），复用数据获取逻辑。
遵循以上结构，即可安全、清晰地在组件间共享 Axios 请求结果，杜绝“map is not a function”类运行时错误。
