React功能组件命名问题

时间:2020-09-03 15:16:53

标签: reactjs react-hooks

当我的组件名称为 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;

1 个答案:

答案 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;