Как использовать useCallback на пользовательском хуке? - PullRequest
Новая
       85

Как использовать useCallback на пользовательском хуке?

1 голос
/ 03 мая 2020

Мне нужно это: const setError = useError(); как зависимость в useEffect, но, поскольку эта функция используется и в других местах (внутри того же компонента), всякий раз, когда выдается ошибка, мой useEffect api повторно выбирает данные .

Стоит ли просто отключить правило react-hooks/exhaustive-deps или есть какой-то выход из этого? Если я пытаюсь обернуть его в useCallback, я получаю сообщение об ошибке, что зацепки могут использоваться только внутри самого компонента.

edit 

export const useError = (): ((error: any, title?: string) => void) => {
  const dispatch = useDispatch();
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const setError = (error: any, title = 'Error'): void => {
    Sentry.captureException(error);
    const bodyText = error.message || error;
    const errorTitle = error.name || title;
    dispatch(
      setNotification({
        type: notificationTypes.prompt,
        title: errorTitle,
        bodyText,
        className: 'error',
        show: true,
      })
    );
  };

  return setError;
};

1 Ответ

0 голосов
/ 03 мая 2020

Вы можете обернуть функцию setError с помощью useCallback with an empty dependency в своем пользовательском хуке перед возвратом, чтобы она создавалась только один раз 

export const useError = (): ((error: any, title?: string) => void) => {
  const dispatch = useDispatch();
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const setError = useCallback((error: any, title = 'Error'): void => {
    Sentry.captureException(error);
    const bodyText = error.message || error;
    const errorTitle = error.name || title;
    dispatch(
      setNotification({
        type: notificationTypes.prompt,
        title: errorTitle,
        bodyText,
        className: 'error',
        show: true,
      })
    );
  }, []);

  return setError;
};

. С учетом вышеизложенного вы можете получить предупреждение ESLint для добавления отправки и Отправьте как зависимость к useCallback массиву зависимостей, вы можете добавить их в массив зависимостей, так как ни disptach, ни Sentry не изменит

...