反应挂钩-如何从useMemo

Question

代码和框链接
这将很快使沙箱浏览器选项卡崩溃
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]);

虽然我的短毛猫给了我这个错误：

  

无法在回调内部调用React Hook“ useForm”。反应钩   必须在React函数组件或自定义的React Hook中调用   function.eslint（react-hooks / rules-of-hooks）

我从react-hook-form库中收到此错误：

有什么想法我要去哪里吗？