所以我有一个表单，它将formData发送给API，像这样：
const [state, setState] = useState(true)
const handleSubmit = async e => {
const destination = state ? true : false
// Sends FormData to api
}
return (
<form onSumbit={handleSubmit}>
<div>
<button onClick={() => setState(prev => !prev)}>click</button
<button onClick={() => setState(prev => !prev)}>click</button
</div>
// some more inputs here
<input type="submit" value="Upload" />
</form>每次状态更改时，它都会尝试再次提交。它只对submitHandler中用于计算destination的状态执行此操作。我也尝试将destination移动到submitHandler之外，但结果是一样的。
2条答案
按热度按时间bq3bfh9z1#
您需要在prev/next按钮上添加
type="button"：https://playcode.io/1495308HTML表单默认假定按钮是提交按钮：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit#additional_attributes
fv2wmkja2#
您遇到的问题，即表单在每次状态更改时都试图再次提交，可能是由于React的重新呈现行为。由于状态更新触发了re-render，表单
onSubmit事件再次被注册，并导致另一次提交尝试。为了防止这种行为，您可以通过向button元素添加type=“button”来对代码进行小的调整。How to prevent buttons from submitting forms