Reactjs 必须在React函数组件或自定义React钩子函数中调用React钩子

我正在尝试编写错误处理程序，但出现以下错误： 不能在回调内调用React挂钩“useHttpErrorHandler”。必须在React函数组件或自定义React钩子函数中调用React钩子 我不知道我还能怎么处理这个错误处理程序

这是威瑟罗·汉德勒：

    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;

---

不能在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>
      );
    };
  };

const WithErrorHandler=（WrappedComponent，axios）=>{
const[error，clearError]=useHttpErrorHandler（axios）；
返回道具=>{
返回(
{error？error.message:null}
);
};
};

我试过这个。但会发生以下错误：错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下：1。React和渲染器（如React DOM）2的版本可能不匹配。你可能违反了Hooks 3的规则。在同一个应用程序中，您可能有多个React副本。有关如何调试和修复此问题的提示，请参见l。是否可以为您的代码提供指向代码沙盒的链接。

  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>
      );
    };
  };