React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

Question

我正在尝试编写一个错误处理程序，但收到此错误：React Hook“useHttpErrorHandler”无法在回调内调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用，我不知道如何处理这个 errorHandler。

这是 withErrorHandler ：

    const WithErrorHandler = (WrappedComponent, axios) => {
        return props => {
            const [error, clearError] = useHttpErrorHandler(axios);
            return (
                <div>
                    <ErrorModal show={error} errorModalClosed={clearError}>
                        {error ? error.message : null}
                    </ErrorModal>
                    <WrappedComponent {...props}/>
                </div>
            )
        }
    };
    
    export default WithErrorHandler;

这是http错误处理程序：

export default httpClient => {
    const [error, setError] = useState(null);

    const reqInterceptor = httpClient.interceptors.request.use(req => {
        setError(null);
        return req;
    });
    const resInterceptor = httpClient.interceptors.response.use(
        res => res,
        err => {
            setError(err);
        }
    );
    useEffect(() => {
        return () => {
            httpClient.interceptors.request.eject(reqInterceptor);
            httpClient.interceptors.response.eject(resInterceptor);
        };
    }, [reqInterceptor, resInterceptor])
    const errorConfirmHandler = () => {
        setError(null);
    };

    return [error, errorConfirmHandler]
}

Answer 1

您不能在 return 语句中使用钩子，请尝试下面，将钩子保留在 return 之外：

  const WithErrorHandler = (WrappedComponent, axios) => {
    const [error, clearError] = useHttpErrorHandler(axios);
    return props => {
      return (
        <div>
          <ErrorModal show={error} errorModalClosed={clearError}>
            {error ? error.message : null}
          </ErrorModal>
          <WrappedComponent {...props} />
        </div>
      );
    };
  };