当我的组件名称为 WithErrorHandler 时,出现以下错误:
不能在回调内部调用React Hook“ useState”。必须在React函数组件或自定义的React Hook函数中调用React Hooks。
但是当我将其更改为 withErrorHandler 时,它可以正常工作。 (首字母小写)
有人可以在这里解释我在做什么错吗?
import React, { useState, useEffect } from 'react';
import Modal from '../../components/UI/Modal/Modal';
import WrapperComponent from '../WrapperComponent/WrapperComponent';
const WithErrorHandler = (WrappedComponent, axios) => {
return props => {
const [error, setError] = useState(null);
const reqInterceptor = axios.interceptors.request.use(req => {
setError(null);
return req;
});
const resInterceptor = axios.interceptors.response.use(res => res, error => {
setError(error);
});
useEffect(() => {
return () => {
axios.interceptors.request.eject(reqInterceptor);
axios.interceptors.response.eject(resInterceptor);
};
}, [reqInterceptor, resInterceptor]);
const closeModalHandler = () => setError(null);
return (
<WrapperComponent>
<Modal show={error} hide={closeModalHandler}>
{error ? error.message : null}
</Modal>
<WrappedComponent {...props} />
</WrapperComponent>
)
}
}
export default WithErrorHandler;
答案 0 :(得分:1)
即使它仍然是有效的代码,它似乎仍在破坏有关钩子的保护措施。
只需将其命名为withErrorHandler
,因为它不是组件,而是一个返回组件的函数,称为Higher-Order Component (HOC)。
您还可以为返回的组件命名。
// Use camelCase for the HOC function.
const withErrorHandler = (WrappedComponent, axios) => {
// Use PascalCase for the name of the component itself (optional but encouraged).
return function WithErrorHandler(props) => {
// This hook is at the right place already!
const [error, setError] = useState(null);
// ...
return /*...*/
}
}
export default withErrorHandler;