0

Codesandbox 链接
这将很快使沙盒浏览器选项卡崩溃
https://stackblitz.com/edit/react-hook-form-use-memo

你可以在这里更好地看到它。只要确保之前打开检查器，您就可以看到我在useEffect()调用中添加的控制台，以显示它正在一遍又一遍地重新渲染。
https://react-hook-form-use-memo.stackblitz.io

我正在使用这样的自定义钩子：

const {
    register,
    getValues,
    unregister,
    triggerValidation,
  } = useForm({
    mode: 'onChange',
  });

const values = getValues();

然后，每当某个值发生变化时，我都会使用useEffect()钩子从钩子返回的对象中运行一系列函数：useForm()

useEffect(() => {
    unregister([
      'lostDate',
      'lostTimezone',
      'amountReceived',
    ]);

    if (values.reason === 'REASON_1') {
      register({ name: 'lostDate' }, { required: 'Choose a lost date' });
      register({ name: 'lostTimezone' }, { required: 'Choose a timezone' });
    }

    if (values.reason === 'REASON_2') {
      register({ name: 'amountReceived' }, { required: 'Choose the amount received' });
    }

    triggerValidation();
  }, [values.reason, register, unregister, triggerValidation]);

这会导致无限循环。我正在阅读它，似乎我需要记住useForm()调用的返回值。我试图这样做：

const useFormOptions = React.useMemo(
    () => ({
      mode: 'onChange',
    }),
    [],
  );

const {
    register,
    getValues,
    unregister,
    triggerValidation,
  } = useMemo(() => {
    return useForm(useFormOptions);
  }, [useFormOptions]);

我的 linter 给了我这个错误：

不能在回调中调用 React Hook “useForm”。必须在 React 函数组件或自定义 React Hook function.eslint(react-hooks/rules-of-hooks) 中调用 React Hooks

我从react-hook-form图书馆得到这个错误： 在此处输入图像描述

有什么想法我哪里出错了吗？

4

0 回答 0