mobx使用时出现undefined

Question

问题描述

在store里面定义了一个page，pageSize等属性用来做分页，然后在组件中，点击分页回调，调用acttion修改对应的page和pageSzie，但是出现undefined

相关代码

store

   /* 当前页数*/
    @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()
            }
        }

这边点击分页回调之后会报错

补充下：

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


    /* 控制modal显示的内容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()

请问这是什么原因

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

this的指向问题
this.props.memberStore里面有page属性吗？
如果有的话可以用这种方式

this.props.memeberStore.updatePage()

如果没有的话就需要在store的constructor里面增加

this.page = page

Answer 2

发现问题了 不能使用 es6的对象解构 来取出其中的方法

Answer 3

你是在自己学习吗？咋一会vue一会react?