React（MERN栈）通用postToAPI函数创建及报错解决

首先，咱们来拆解你遇到的核心问题，然后一步步修复：

1. 导入导出不匹配导致的TypeError: Object(...) is not a function #

你在postToAPI.js里用的是默认导出：

export default postToAPI;

但在Login.js里用了命名导入：

import { postToAPI } from './postToAPI'

这两种方式不匹配，React找不到对应的函数。你有两种修复方式：

• 方式一：保持默认导出，修改Login里的导入：

  import postToAPI from './postToAPI'
  

• 方式二：改成命名导出，修改postToAPI.js的导出：

  export const postToAPI = async (route, package2send) => {
    // ...函数内容
  }
  

  这样Login里的命名导入就可以正常使用了。

2. postToAPI函数本身的逻辑错误 #

你的原函数里嵌套了一个async箭头函数，但既没有执行它，也没有返回它，导致实际调用postToAPI时，它返回的是undefined，自然会报错“不是函数”。另外还有两个小细节错误：

• fetch的body需要传入JSON字符串，不能直接传对象
• 变量名拼写错误：response.json()应该是res.json()（前面定义的是const res = await fetch(...)）

修正后的完整postToAPI函数 #

// postToAPI.js
export default async function postToAPI(route, package2send) {
  try {
    const payload = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      // 把JS对象转成JSON字符串
      body: JSON.stringify(package2send)
    };
    const res = await fetch(route, payload);
    
    // 先检查请求是否成功（HTTP状态码200-299）
    if (!res.ok) {
      throw new Error(`HTTP error! Status: ${res.status}`);
    }
    
    const data = await res.json();
    console.log('API返回数据:', data);
    return data;
  } catch(error) {
    console.error('POST请求失败:', error);
    // 把错误抛出去，让调用方可以处理
    throw error;
  }
}

3. 在Login.js中正确调用 #

比如在登录逻辑里这样使用：

// Login.js
import postToAPI from './postToAPI';

const handleLogin = async () => {
  try {
    const loginData = {
      email: 'user@example.com',
      password: '123456'
    };
    // 假设你的登录API端点是'/api/login'
    const result = await postToAPI('/api/login', loginData);
    // 处理登录成功的逻辑，比如存储token、跳转页面
    console.log('登录成功:', result);
  } catch (error) {
    // 处理登录失败的逻辑，比如提示用户
    console.error('登录失败:', error);
  }
};

额外优化建议 #

• 可以把API的基础域名抽成常量，避免每次写完整路径，比如：

  const BASE_URL = 'http://localhost:5000'; // 你的后端地址
  const res = await fetch(`${BASE_URL}${route}`, payload);
  

• 对于需要认证的请求，可以在headers里加上Authorization token，比如：

  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  }
  

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