React函数应用程序未处理拒绝(RangeError):超过了最大调用堆栈大小

Question

我正在使用函数应用程序使用reactjs编写我的第一个表单。我能够使表单工作并设置一些简单的验证。

我准备了一个函数，将处理提交表单到后端。然而，当我点击提交时。它抛出以下错误？

在此处输入图像描述

Unhandled Rejection (RangeError): Maximum call stack size exceeded
postUsers
src/pages/Users/create.js:29
26 |     }
27 | }
28 | 
> 29 | const postUsers = async () => {
| ^  30 |     let res = await postUsers(mobileCountryCode)
31 |     
32 |     console.log("postUsers.res:")

你们能帮我弄清楚我错过了什么吗？

谢谢

Form.js

import React, { useState } from 'react'
import './Users.scss'

const UsersCreate = (props) => {
*emphasized text*
const [mobileCountryCode, setmobileCountryCode] = useState("");
const [mobileCountryCodeErr, setmobileCountryCodeErr] = useState({});
const handleSubmit = (e) => {
e.preventDefault();
console.log("handleSubmit:")
console.log(e)
const isValid = formValidation()
if (isValid) {
console.log("Form Valid: Processing on Backend")
console.log("mobileCountryCode: ", mobileCountryCode)
postUsers()
e.preventDefault();
} else {
console.log("Form Invalid: Please check form")
}
}
const postUsers = async () => {
let res = await postUsers(mobileCountryCode)

console.log("postUsers.res:")
console.log(res)

}
const formValidation = () => {
const mobileCountryCodeErr = {}
let isValid = true
if (mobileCountryCode.trim().length != 2) {
mobileCountryCodeErr.missingLength = "Mobile country code must be two (2) digits."
isValid = false
}
setmobileCountryCodeErr(mobileCountryCodeErr)
return isValid
}
return (
<div className="container">
<p>&nbsp;</p>
<h1 className="title">Users</h1>
<h2 className="subtitle">Create New User</h2>
<form onSubmit={handleSubmit}>
<div className="field">
<label className="label">User Type</label>
<div className="control">
<div className="select">
<select>
<option>Admin</option>
<option>Manager</option>
<option>User</option>
</select>
</div>
</div>
</div>
<div className="field">
<label className="label">Mobile Country Code</label>
<div className="control">
<input name="mobileCountryCode" className="input" type="text" placeholder="Text input"
value={mobileCountryCode}
onChange={e => setmobileCountryCode(e.target.value)} />
</div>
{Object.keys(mobileCountryCodeErr).map((key) => {
return <p className="help is-danger">{mobileCountryCodeErr[key]}</p>
})}
</div>
<div className="field">
<label className="label">Mobile Number</label>
<div className="control">
<input name="mobile_number" className="input" type="text" placeholder="Text input" />
</div>
</div>
<div className="field is-grouped">
<div className="control">
<button className="button is-link" type="submit">Create New User</button>
</div>
<div className="control">
<button className="button is-link is-light">Cancel</button>
</div>
</div>
</form>

</div>
)
}
export default UsersCreate

postUsers.js

import axios from "axios";
const postUsers = async (mobileCountryCode, mobileNumber) => {
return new Promise((resolve, reject) => {
axios
.post(process.env.REACT_APP_API_HOST + "/users",
{
mobile_country_code: mobileCountryCode,
mobile_number: mobileNumber,
},
{
headers: {
'Authorization': 'Bearer xxxx'
}
},
)
.then(response => {
console.log("handleSubmit.response:")
console.log(response)
resolve(response)
})
.catch(error => {
alert(error)
console.log("login error", error);
reject(error)
});
})
}
export default postUsers

Answer 1

看起来postUsers不是从postUsers.js文件调用postUsers，而是在调用自己，这会导致它调用自己，依此类推，直到堆栈溢出。

Javascript是一种动态语言，并且不像您所期望的类型化语言那样具有函数重载。这意味着，如果有两个名称相同的函数，无论它们期望的参数数量如何，最后一个定义都将覆盖以前的定义。

只需更改其中一个函数的名称，使它们彼此不同(不要忘记导入它(，就可以解决问题。