React hooks - Как я могу вернуть вызов hook из useMemo - PullRequest
Новая
       34

React hooks - Как я могу вернуть вызов hook из useMemo

0 голосов
/ 20 октября 2019

Ссылка 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]);

Мой линтер дает мне эту ошибку, хотя:

React Hook "useForm" не может быть вызван внутри обратного вызова. React Hooks должны вызываться в компоненте функции React или в пользовательской функции React Hook.eslint (response-hooks / rules-of-hooks)

Я получаю эту ошибку из библиотеки react-hook-form, хотя:enter image description here

Есть идеи, где я ошибаюсь?

...