React-Hook-Forms：超出最大更新深度

Question

我有一个接受用户键入的 5 个值的表单。 前 4 个值的总和必须与第 5 个值相匹配。

valueA + valueB + valueC + valueD == valueE

如果他们不这样做，则会弹出一条错误消息。 检查是实时的，并在用户键入值时开始。

这是我的代码。

const {
        control,
        watch,
        getValues,
        setValue,
        setError,
        clearErrors,
        formState: { errors, isDirty },
    } = useForm({})


const watchValues= watch(["valueA", "valueB", "valueC", "valueD", "valueE"]);
    useEffect(() => {
        let val1 = getValues("valueA") ? parseFloat(getValues("valueA")) : 0.0;
        let val2 = getValues("valueB") ? parseFloat(getValues("valueB")) : 0.0;
        let val3 = getValues("valueC") ? parseFloat(getValues("valueC")) : 0.0;
        let val4 = getValues("valueD") ? parseFloat(getValues("valueD")) : 0.0;
        let val5 = getValues("valueE") ? parseFloat(getValues("valueE")) : 0.0;

        let compareValue = Boolean((val1 + val2 + val3 + val4 ).toFixed(2) === val5.toFixed(2));

        if (!compareValue) {
            setError("valueE", {
                type: "manual",
                message: "Error",
            });
        } else clearErrors("valueE");
    }, [watchValues]);

在声明formState: { errors, isDirty },之前，特别是errors ，这是按预期工作的。 将errors添加到formState后，我开始遇到Maximum update depth exceeded的问题。

谁能帮忙？

我知道为什么会发生错误，但我不明白为什么会在这里发生； 什么会导致循环。 我只设法将问题查明到setError / clearError if-else语句。

我试图达到的最终结果是仅在值不匹配时停止提交表单。（因此，如果所有字段均为空白，那将是有效输入）

Answer 1

尝试使用 react-hook-form 中的 useWatch 钩子， https://react-hook-form.com/api/usewatch 。 它将帮助您重新渲染，并将其结果放入 useEffect deps。

const watchValues = useWatch({control,});
useEffect(()=>{ ... what you have...}, [watchValues])