MobX 在异步操作后运行函数

Question

我在使用 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())
}

有人知道如何解决这个问题吗？

Answer 1

在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);
})

});