React调用saveProject报错：is not a function问题求助

核心问题分析 #

你的saveProject模块写法完全错误：

• 它不是React组件，却导入了React和useState，完全没必要
• 函数内部嵌套了handleSubmit但从未调用，直接返回null，导致调用saveProject(projectData)时，实际没有执行任何请求逻辑，且因函数结构问题引发类型错误

修复步骤 #

1. 重构saveProject模块 #

将其改为普通的请求函数，去掉无用的React依赖，直接发起Axios请求：

// features/saveProject.js
import axios from "axios";

// 改为直接执行请求的函数
const saveProject = (projectData) => {
  return axios
    .post("http://localhost:4000/users", projectData)
    .then((res) => {
      console.log(res);
      return res;
    })
    .catch((err) => {
      console.error(err);
      throw err; // 抛出错误让组件可以捕获处理
    });
};

export default saveProject;

或者使用async/await风格（更易读）：

// features/saveProject.js
import axios from "axios";

const saveProject = async (projectData) => {
  try {
    const res = await axios.post("http://localhost:4000/users", projectData);
    console.log(res);
    return res;
  } catch (err) {
    console.error(err);
    throw err;
  }
};

export default saveProject;

2. 修正组件中的调用逻辑 #

因为saveProject是异步函数，建议用async/await处理：

// AddProject.jsx
import React, { useState, useContext } from "react";
import "./addproject.css";
import UserContext from "../../UserContext";
import saveProject from '../../features/saveProject';

function AddProject() {
  // 假设你已经从Context获取了userEmail，以及定义了clientName等状态
  const { userEmail } = useContext(UserContext);
  const [clientName, setClientName] = useState('');
  const [clientEmail, setClientEmail] = useState('');
  const [stages, setStages] = useState([]);

  const handleSaveProject = async () => {
    const projectData = {
      [userEmail]: {
        clientName: clientName,
        clientEmail: clientEmail,
        stages: stages,
      }
    };

    console.log(userEmail, projectData);

    try {
      await saveProject(projectData);
      // 请求成功后的操作，比如弹出提示、清空表单或跳转页面
      alert('项目保存成功');
    } catch (err) {
      // 请求失败的处理，比如提示用户
      alert('保存失败，请重试');
    }
  };

  // 组件其他逻辑...
  return (
    // 你的组件JSX
  );
}

export default AddProject;

3. 关于导出导入的注意事项 #

如果你想用命名导出而非默认导出，需保持语法一致：

• 在saveProject.js中用命名导出：

  export const saveProject = async (projectData) => { /* ... */ };
  

• 在组件中用命名导入：

  import { saveProject } from '../../features/saveProject';
  

为什么之前的写法报错？ #

原saveProject函数内部定义了handleSubmit但从未执行，直接返回null，当你在组件中调用saveProject(projectData)时，相当于调用了一个最终返回null的函数，加上模块不必要的React依赖，导致Webpack打包时出现类型判断错误，提示“不是函数”。

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