使用高阶组件HOC抽离了一些重复的逻辑代码,可是结果是我在组件当中点击按钮去调用抽离出去的那个方法,是报错的,我记得mixin混入可以这么干吧,都调不了HOC里面的方法, 抽离出去还有啥意义啊

HOC的代码是这样的

import React from 'react'

export default function withList(WrappedComponent, selectData) {
    return class extends React.Component {
        constructor(props) {
            super(props)
            this.pageSize = 10
            this.getSource = this.getSource.bind(this)
        }
        componentDidMount() {
            this.onSearch()
        }
        // 检索列表
        onSearch() {
            let searchData = this.props.form.getFieldsValue()  // 搜索框为空的时候表单 name: undefined
            this.setState({ currentPage: 1, searchData }, () => {
                this.getSource()
            })
        }
        // 初始化数据
        getSource() {
            const formData = this.state.searchData
            const data = {
                pageSize: this.pageSize,
                pageNumber: this.state.currentPage,
                ...formData         // 搜索框为空的时候name: undefined
            }
            this.setState({ loading: true })
            var a = Service.list(data);
            console.log(typeof a);
            a.then(res => {
                let { status, msg, data } = res
                this.setState({
                    list: data ? data.list : [],
                    total: data ? data.total : 0,
                    loading: false
                })
            }).catch(err => {
                this.setState({ loading: false })
                if (err.status == 6003) {
                    this.setState({ list: [], total: 0 })
                } else {
                    message.error(err.msg)
                }
            })
        }
        render() {
            return (
                <WrappedComponent data={this.state} {...this.props}/>
            )
        }
    }
}

我在组件中去调用这些方法是不可行的,