防止在reactjs中提交多个表单

我的应用程序有多个表单，我在所有地方都添加了这些表单

const [submitted, setSubmitted] = useState(false)

const onSubmit = (e) => {

    if (submitted) {
        return;
    }
    setSubmitted(true)
    e.preventDefault()
    console.log('submitted!')
}

<form onSubmit={ (e) => onSubmit(e) }>...</form>

const[submitted，setSubmitted]=useState（false）
const onSubmit=（e）=>{
如果（已提交）{
返回；
}
setSubmitted（真）
e、 预防默认值（）
console.log（'submitted！'）
}
onSubmit（e）}>。。。

---

是否有一种更有效的方法来处理所有形式的问题？感谢您的指导。

您可以使用简单的

我过度简化了逻辑，因此不会导致不必要的渲染：

const useOnSubmit = () => {
  const [, setSubmitted] = useState(false);

  const onSubmit = useCallback(e => {
    e.preventDefault();
    setSubmitted(prevState => prevState || !prevState);
  }, []);

  return onSubmit;
};

// Usage
const onSubmit = useOnSubmit();
<form onSubmit={onSubmit}>...</form>

const useosubmit=（）=>{
const[，setSubmitted]=使用状态（false）；
const onSubmit=useCallback（e=>{
e、 预防默认值（）；
setSubmitted（prevState=>prevState | |！prevState）；
}, []);
提交时返回；
};
//用法
const onSubmit=useOnSubmit（）；
...

就像@goto1在评论中提到的那样，您可以创建一个自定义挂钩，以获得更干净、可重用的外观。下面是我对一个名为

useCbOnce

的定制钩子的看法，它调用任何事件回调一次：

const useCbOnce = (cb) => {
    const [called, setCalled] = useState(false);

    // Below can be wrapped in useCallback whenever re-renders becomes a problem
    return (e) => {
        if (!called) {
            setCalled(true);
            cb(e);
        }
    }
}

const MyForm = (props) => {
    const handleSubmit = useCbOnce((e) => {
        e.preventDefault()
        console.log('submitted!')
    });
    return <form onSubmit={handleSubmit}>...</form>;
}

const useCbOnce=（cb）=>{
const[called，setCalled]=useState（false）；
//当重新渲染出现问题时，可以将下面的内容包装在useCallback中
返回（e）=>{
如果（！调用）{
setCalled（true）；
cb（e）；
}
}
}
常量MyForm=（道具）=>{
const handleSubmit=useCbOnce（（e）=>{
e、 预防默认值（）
console.log（'submitted！'）
});
返回。。。；
}

下面的示例允许您自定义提交时发生的操作，但始终阻止默认操作，并且只调用一次操作

函数useSubmitAction（action=null，dependencies=[action]）{
const[submited，setSubmitted]=React.useState（false）
return React.useCallback（函数（事件，…rest）{
event.preventDefault（）
如果（已提交）返回
setSubmitted（真）
如果（动作）动作（事件，…休息）
}，依赖项）
}
函数形式（道具）{
const onSubmit=useSubmitAction（（e）=>console.log（'submiting event type'，e.type））
返回(
提交
)
}
ReactDOM.render（，document.getElementById（'app'））

我通常在表单提交时禁用提交按钮。如果成功了，我会给出一个成功的消息或下一步，或者任何有意义的东西，而不是表单；如果不成功，我会弹出错误并启用submit按钮。创建一个自定义挂钩。这就是我在这里所做的。。只是禁用表单而不是按钮thtat很好。。。但可能有更好的方法吗？你有什么想法@goto1@handsome在你的例子中，你认为什么是低效的？您指的是性能效率还是开发效率？非常复杂的解决方案！我不知道“逻辑生活”是什么意思，我最终还是用了这个。非常感谢。但只是发现了一个小问题。当我提交表单时，我禁用了重新提交。但是假设后端报告了一个错误，比如表单由于缺少字段而无法提交。如何恢复以前的状态，允许用户修复数据并再次提交？@shammy，没问题！在回答你的新问题之前，这是有点超出了最初的要求，因为我们没有考虑后端。所以最好是提出一个新问题。简单地说，您可以创建一个类似的自定义钩子来接受承诺，这样您就可以通过

fetch（）

解析或拒绝请求。由此，您的自定义钩子可以从

fetch（）

捕获错误，只需调用

setState（false）

即可再次允许提交。酷。