problem description

define an attribute such as page,pageSize in store to do paging. Then in the component, click the paging callback and call acttion to modify the corresponding page and pageSzie, but undefined

related codes

store

   /* */
    @observable
    page = 1

    
    @action
    updatePage(page: number) {
        // this.page = page
        console.log(this.page)
    }

components

       const {memberList, memberData, visible, flag, pageSize, page, total, updatePage, updatePageSize, getMemberList} = this.props.memberStore
        const pagination = {
            showQuickJumper: true,
            showSizeChanger: true,
            showTotal: (totals: number) => (
                `${totals}`
            ),
            total,
            pageSize,
            current: page,
            onChange: (pagecb: number, pageSizecb: number) => {
                updatePage(pagecb)
                updatePageSize(pageSizecb)
                getMemberList()
            },
            onShowSizeChange: (current: number, size: number) => {
                updatePageSize(size)
                updatePage(current)
                getMemberList()
            }
        }

an error will be reported after clicking the paging callback here

add:

export class Pagination {

    @observable
    page = 1

    @observable
    pageSize = 10

    @observable
    total: number

    @action
    setPage(page: number) {
        console.log(this)
        this.page = page
    }

    @action
    setPageSize(pageSize: number) {
        this.pageSize = pageSize
    }

    @action
    setTotal(total: number) {
        this.total = total
    }
}

export class MemberStore extends Pagination {

    /* dialog*/
    @observable
    visible = false

    /* */
    @observable
    memberList: IMemberData[]

    /* */
    @observable
    memberData: IMemberData


    /* modaltrue false*/
    @observable
    flag = true


    @action
    updateVisible(flag: boolean) {
        this.visible = flag
    }

    @action
    updateFlag(flag: boolean) {
        this.flag = flag
    }

    @action
    async getMemberList(flag: boolean = false) {

        console.log(this)
        if (flag) {
            this.page = 1
        }
        try {
            const data = await getMemberInfo(this.page, this.pageSize)
            runInAction(() => {
                this.memberList = data.data.result.items
                this.pageSize = data.data.result.pageSize
                this.total = data.data.result.total
                this.page = data.data.result.page
            })
        } catch (e) {
            runInAction(() => {
                console.log(e)
            })
        }
    }

    @action
    async updateMemberData(member: IMemberData) {
        try {
            await editMemberInfo(member)
        } catch (e) {
            runInAction(() => {
                console.log(e)
            })
        }
    }

    @action
    async saveMemberData(member: IMemberData) {
        try {
            await saveMemberInfo(member)
        } catch (e) {
            runInAction(() => {
                console.log(e)
            })
        }
    }

    @action
    async getMemberInfoByPhone(phone: string) {
        try {
            const data = await getMemberInfo(this.page, this.pageSize, phone)
            runInAction(() => {
                this.memberList = data.data.result.items
            })
        } catch (e) {
            runInAction(() => {
                console.log(e)
            })
        }
    }


}

export default new MemberStore()

what is the reason for this

what result do you expect? What is the error message actually seen?