React函数式组件表单提交触发栈溢出错误求排查

AI 小北

2026-5-9

问题分析与解决方案

嘿，这个错误的原因特别明显——你不小心写出了无限递归！

看你Create.js里的这段代码：

const postUsers = async () => {
  let res = await postUsers(mobileCountryCode)
  console.log("postUsers.res:")
  console.log(res)
}

你在自己定义的postUsers函数里，又调用了同名的postUsers，但这里调用的根本不是你封装好的axios请求函数，而是当前这个组件里的函数本身！每调用一次就会触发新的调用，调用栈不断堆叠，直到超出浏览器的最大栈容量，就抛出了Maximum call stack size exceeded错误。

解决办法

有两种简单的方式可以解决这个命名冲突问题：

1. 给封装的API请求函数重命名

在你的postUsers.js里，把导出的函数改个名字，比如加上Api后缀来区分：

// postUsers.js
import axios from 'axios'

export const postUsersApi = async (mobileCountryCode) => {
  // 原来的axios请求逻辑，比如：
  return await axios.post('/api/users', { mobileCountryCode })
}

然后在Create.js里调用这个重命名后的函数：

// Create.js
import { postUsersApi } from './postUsers.js'

const postUsers = async () => {
  let res = await postUsersApi(mobileCountryCode)
  console.log("postUsers.res:")
  console.log(res)
}

2. 导入时使用别名

如果不想修改封装函数的名字，可以在导入的时候给它起一个别名：

// Create.js
import { postUsers as postUsersApi } from './postUsers.js'

const postUsers = async () => {
  let res = await postUsersApi(mobileCountryCode)
  console.log("postUsers.res:")
  console.log(res)
}