时间戳

首页 > 解决方案 > React 函数组件命名问题

reactjs - React 函数组件命名问题

问题描述

当我的组件名称为WithErrorHandler 时，我收到以下错误：

不能在回调中调用 React Hook “useState”。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。

但是当我将其更改为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;

标签： reactjsreact-hooks

解决方案

尽管它仍然是有效的代码，但它看起来像是在触发关于钩子的保护措施。

只需命名它withErrorHandler，因为它不是组件，它是返回组件的函数，称为高阶组件（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;

推荐阅读