反应：无效的钩子调用错误与rc-pagination

Question

我正在使用 rc-pagination 和 rc-select npm 包在 React 中开发分页组件：

这里的例子： https://react-component.github.io/pagination/?path=/story/rc-pagination--jumper

我正在使用基于类的组件，除非添加此道具，否则一切都会完美呈现：

selectComponentClass={选择}

我收到此错误：

错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. 您可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用中拥有多个 React 副本

---

我需要这个道具来渲染 rc-select 这是一个下拉菜单，其中包含每页的页面列表，例如 10、20、50

我也尝试过使用带有 prop 的自定义组件，例如 selectComponentClass={CustomSelect} 也不起作用。

我确实使用了一个简单的 create-react-app 进行了测试，并像上面一样添加了 rc-pagination 并且它有效，所以我不确定是否需要一些 webpack 设置，因为我的项目不使用 create-react-应用程序都是自定义的。

import React from 'react';
import Pagination from 'rc-pagination';
import Select from 'rc-select';
import locale from 'rc-pagination/es/locale/en_US';

export interface CustomPaginationProps {
    id?: string;
    current?: number;
    total?: number;
    pageSize?: number;
    pageSizeOptions: any;
    selectOptions?: any;
}

export interface CustomPaginationState {
    current?: number;
    pageSize?: number;
    total?: number;
}

class CustomPagination extends React.Component<CustomPaginationProps, CustomPaginationState> {
    state = {
        current: 1,
        pageSize: 10,
        total: 0
    };
    
    constructor(props: CustomPaginationProps) {
        super(props);
        
        this.onHandlePaginateChange = this.onHandlePaginateChange.bind(this);
    }
    
    updatePagination(current: number, pageSize: number, total: number) {
        
    }
    
    componentDidMount() {
        this.updatePagination(this.props.current, this.props.pageSize, this.props.total);
    }
    
    onHandlePaginateChange(current: number, pageSize: number, total: number) {
        this.updatePagination(current, pageSize, this.state.total);
    }
    
    render() {
        return (
            <>
            <Pagination
            selectComponentClass={Select}
            locale={locale}
            current={this.state.current}
            onChange={this.onHandlePaginateChange}
            pageSize={this.state.pageSize}
            pageSizeOptions={this.props.selectOptions}
            total={this.state.total}
            showQuickJumper
            showSizeChanger
            />
            </>
        );
    }
}

export default CustomPagination;

---

<CustomPagination
    current={3}
    pageSize={5}
    total={totalItems}
    pageSizeOptions={selectOptions}
/>

Answer 1

Select 可能是钩子，你在类组件中调用它，这是非法的。