javascript - useEffect React Hook 使用异步等待(提交按钮)多次渲染

Question

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

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

基本上，setSubmitting 会被调用，但实际上不会执行任何操作，直到有另一次刷新。我希望它只被调用一次。我不知道为什么 submitAsync 甚至会运行多次，因为依赖项(错误)没有改变。如果它们正在改变，那么第二次 noErrors 会有所不同，它甚至不会碰到那个 block 。

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

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

Answer 1

任何遇到此问题的新人:

与数据一起传递给 useEffect 的第二个数组参数可能会导致多重渲染。只传入一个数组[]，它会渲染一次。

如前所述here 通过 react 官方网站。如果重新渲染之间没有发生某些更改，则可以停止效果。这将防止它多次渲染