Question

我需要这样做：const setError = useError();作为useEffect中的依赖项，但是由于此函数也用在其他地方（在同一组件内），所以每当抛出错误时，我的{{1 }}重新获取数据。

我应该禁用useEffect api规则还是有解决办法？如果尝试将其包装在react-hooks/exhaustive-deps中，则会收到一个错误，指出只能在组件本身内使用钩子。

修改

useCallback

Answer 1

您可以在返回之前将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警告，将调度和Sentry作为依赖项添加到useCallback依赖项数组中，您可以将它们添加到依赖项数组中，因为disptach或Sentry都不会改变

如何在自定义钩子上使用useCallback？

1 个答案: