MobX async action执行后调用函数顺序错位，依赖computed值异常如何解决

问题原因 #

MobX 对 async/await 语法的异步 action 默认只会包裹 await 关键字之前的代码到 action 事务中，await 之后的状态修改代码默认在全局作用域执行，没有被 action 管理。这就导致你修改 furnitureMap 的操作和 Promise resolve 的时机不同步，finally 代码块执行时状态修改还未被 MobX 处理，getAllFurniture computed 值还是旧数据。

解决方案 #

方案1：用 runInAction 包裹 await 后的状态修改代码 #

手动将所有修改状态的逻辑放到 runInAction 中，确保状态修改同步完成后 Promise 才会 resolve，修改后的 store 代码如下：

import { runInAction } from "mobx"

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

方案2：用 flow 定义异步 action（更推荐） #

MobX 提供的 flow 工具基于 generator 函数实现，会自动把所有状态修改逻辑包裹到 action 中，不需要手动处理作用域问题，代码如下：

import { flow } from "mobx"

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

修改后 finally 代码块就会在所有状态修改完成后执行，onSortHandler 中拿到的 getAllFurniture 就是最新的计算值。

内容的提问来源于stack exchange，提问作者RPeter7