Javascript useEffect React钩子渲染多次使用异步等待（提交按钮）

我试图基本上禁用submit按钮，这样我的api调用只会触发一次/当操作已经进行时，有人不能再次单击submit

我将runOnSubmit函数转换为异步函数，并直接调用它。我基于许多其他解决方案，基本上，当我执行此操作并进行调试时，我可以看出isSubmitting仍然设置为true，并且钩子被调用了多次/submitAsync函数被调用了两次

基本上，setSubmitting会被调用，但在再次刷新之前实际上不会执行任何操作。我希望它只被呼叫一次。我不知道为什么submitAsync会运行多次，因为依赖项（错误）没有改变。如果他们在改变，那么第二次就不会有错误，甚至不会碰到那个块

useEffect(() => {

        if (isSubmitting) {
            const noErrors = Object.keys(errors).length === 0;
            if (noErrors) {

                const submitAsync = async () => {
                    await runOnSubmit()
                    setSubmitting(false)
                }

                // clear out touched upon submission
                setTouched([]);
                submitAsync();
            } else {
                setSubmitting(false);
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [errors]);

更新-添加更多信息：

 // function for form submission
    const handleSubmit = (event) => {
        event.preventDefault();
        const validationErrors = validate(values);
        setErrors(validationErrors);
        setSubmitting(true);
    }

由于此函数将Submitting设置为true，因此应重新运行useEffect函数，因为isSubmitting位于依赖项数组中

调用submit并禁用它的按钮：

<Button 
 disabled={isSubmitting} 
 buttonType="submit" 
 text="Create Account" />

运行时：

use effect running true
use effect submitting true
use effect no errors
inside submit async
the user called signup method
console after submit
after function
after set false
use effect running false

---

这里并没有多大意义的问题是“提交后的控制台”在“函数后”之前运行。这就好像async Wait没有做任何事情。

对于任何有此问题的新PERON：

传递给

useffect

并带有数据的第二个数组参数可能导致多重渲染。只传入一个数组

[]

，它将渲染一次

如上所述

---

通过官方网站。如果在重新渲染之间未发生某些更改，则可以停止效果。这将防止它多次渲染

似乎提供的代码不足以重现您的问题

[errors]

作为

useffect

钩子的第二个参数可能会导致它过时，并且在更改

errors

对象之前不会重新运行。但这取决于您如何声明和修改

错误

。或者每次渲染后可能会调用

useffect

，这主要取决于

isSubmitting

的更改方式。我实际上认为您是对的，我甚至不确定为什么会在那里使用错误。我将依赖项数组更改为

[isSubmitting==true]

，因为我希望它仅在提交时重新运行。问题是我可以连续单击submit，但它没有禁用。在上面添加handleSubmit函数和submit按钮，我将您的代码放在codesandbox中，无法重现您的问题。真奇怪。我会尽量把完整的代码，但它是使用我们所有的后端api的，所以很难复制。我在console.logs中添加了，很明显，它没有等待响应。也许我需要试着用承诺来代替，但我已经试过了difference@StephenPhillips如果我们看不到

错误的来源以及如何声明和修改它，那么就很难解决您的问题。也不清楚为什么
isSubmitting
不在依赖项数组中，因为您在回调正文中引用了它。
useEffect(() => {
        console.log("use effect running", isSubmitting)
        if (isSubmitting) {
            console.log("use effect submitting true")
            const noErrors = Object.keys(errors).length === 0;
            if (noErrors) {
                console.log("use effect no errors")
                const submitAsync = async () => {
                    console.log("inside submit async")
                    await runOnSubmit()
                    console.log("after function")
                    setSubmitting(false)
                    console.log("after set false")
                }

                // clear out touched upon submission
                setTouched([]);
                submitAsync();
                console.log("console after submit")
            } else {
                setSubmitting(false);
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isSubmitting === true]);

use effect running true
use effect submitting true
use effect no errors
inside submit async
the user called signup method
console after submit
after function
after set false
use effect running false