mobx使用時(shí)出現(xiàn)undefined

問題描述

在store里面定義了一個(gè)page，pageSize等屬性用來做分頁(yè)，然后在組件中，點(diǎn)擊分頁(yè)回調(diào)，調(diào)用acttion修改對(duì)應(yīng)的page和pageSzie，但是出現(xiàn)undefined

相關(guān)代碼

store

   /* 當(dāng)前頁(yè)數(shù)*/
    @observable
    page = 1

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

組件

       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()
            }
        }

這邊點(diǎn)擊分頁(yè)回調(diào)之后會(huì)報(bào)錯(cuò)

補(bǔ)充下：

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

    /* 獲取列表數(shù)據(jù)*/
    @observable
    memberList: IMemberData[]

    /* 單行數(shù)據(jù)*/
    @observable
    memberData: IMemberData


    /* 控制modal顯示的內(nèi)容true 顯示新增，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()

請(qǐng)問這是什么原因

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？