useEffect React Hook 使用異步等待多次渲染（提交按鈕）

Question

我試圖基本上禁用提交按鈕，因此我的 api 調用僅被觸發一次/有人無法在操作已經進行時再次單擊提交。

我將 runOnSubmit 函數轉換為異步函數並直接調用它。 我已經基於許多其他解決方案，基本上當我這樣做並調試時，我可以看出 isSubmitting 仍然設置為 true 並且鈎子被多次調用/ submitAsync 函數被調用兩次。

基本上， setSubmitting 被調用，但在再次刷新之前實際上不會做任何事情。 我希望它只被調用一次。 我不知道為什么 submitAsync 甚至會運行多次，因為依賴項（錯誤）沒有改變。 如果它們發生變化，那么第二次 noErrors 就會不同，它甚至不會擊中那個塊。

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 位於依賴項數組中。

按鈕調用提交並禁用它：

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

我的按鈕組件：

<button 
  type={props.buttonType}
  disabled={props.disabled}
  onClick={props.onClick}>
     {props.text}
 </button>

第二次編輯 - 在 console.logs 中添加：

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

這里沒有多大意義的問題是“提交后的控制台”在“函數后”之前運行。 就好像異步等待沒有做任何事情一樣。

Answer 1

對於任何有此問題的新人：

使用數據傳遞給useEffect第二個數組參數可能會導致多重渲染。 只傳入一個數組[] ，它將渲染一次。

如前所述這里通過反應官方網站。 如果在重新渲染之間沒有發生某些更改，則可以停止該效果。 這將防止它多次渲染