时间戳

首页 > 解决方案 > MobX 在异步操作后运行函数

reactjs - MobX 在异步操作后运行函数

问题描述

我有一个 MobX 问题，因为我想调用onSortHandler以及在我的商店中loadingCallback执行异步操作之后，但由于异步操作，调用顺序未对齐。该问题增加的复杂性在于onSortHandler触发了一个函数，该函数使用由给定操作计算的计算值。

这是我在商店中的操作：

loadFurniturePage = async (pageNumber: number, pageAmount: number) => {
        const nextPage = await agent.FrontEnd.getNextFurniturePage(pageNumber, pageAmount); <-- I suppose while waiting here, the finally block get called. (See it below)
        nextPage.forEach((furniture: IFurniture) => {
            furniture.type = furniture.typeInString;
            this.furnitureMap.set(furniture.id, furniture)          
        });
    }

这是我调用上述操作的地方：

loadFurniturePage(pageNumber, pageAmount).finally(() => { <-- this code block should be called after the action finishes it's running.
    onSortHandler(selectedSortByValue); 
    loadingCallback(false);
});

这是我调用时使用的计算值onSortHandler：

get getAllFurniture() {
    return Array.from(this.furnitureMap.values())
}

有没有人有想法，如何解决这个问题？

标签： reactjsmobx

解决方案

async如果您继续更改 mobx 可观察对象，则在函数调用之后，将该代码包装在runInAction

loadFurniturePage = async (pageNumber: number, pageAmount: number) => {
        const nextPage = await agent.FrontEnd.getNextFurniturePage(pageNumber, pageAmount);
        runInAction(()=>{
        nextPage.forEach((furniture: IFurniture) => {
            furniture.type = furniture.typeInString;
            this.furnitureMap.set(furniture.id, furniture)          
        });
})

    }

loadFurniturePage(pageNumber, pageAmount).finally(() => {
    runInAction(()=>{
    onSortHandler(selectedSortByValue); 
    loadingCallback(false);
})

});

推荐阅读