(React & Mobx & Leaflet) await 然后没有像我预期的那样工作

Question

晚上好。

此组件的目的是创建一个从 observable curentLocation 获取数据的地图。 useEffect() 中的 loadInitialLocation() 和 newMap() 只应调用一次，而 autorun() 中的 updateMap() 会在 obrservable curentLocation 更改时调用。

问题是：在 loadInitialLocation() 完成其从服务器获取数据并将结果加载到 observable curentLocation 的工作之前，不应调用 newMap()。现在 newMap() 在 obrservable curentLocation 为 null 时被调用。

我在 useEffect() 中试过这个：

useEffect(() => {
    loadInitialLocation().then(newMap());
  }, []);

其中 constant loadInitialLocation:() => Promise<void>。我预计“newMap() 只有在 loadInitialLocation() 完成后才会运行”。

我也在 useEffect() 中尝试过这个：

useEffect(() => {
    const getCurLoc = async () => {
      await loadInitialLocation();
      newMap();
    }
    getCurLoc();
  }, []);

还有这个：

useEffect(() => {
    loadInitialLocation().then(newMap());
    autorun(() => {
      console.log("autorun here")
      updateMap();
    });
  }, []);

商店：

@observable currentLocation: ILocation | null = null;
@action loadInitialLocation = async () => {
      try {
        const currentLocation = await agent.Adventure.locationDetails();
        runInAction(() => {
          this.currentLocation = currentLocation;
          console.log("load currentLocation")
        });
      } catch (error) {
        throw error;
      }
    }
  };

组件：

const LeafletMap: React.FC = () => {
  var map: L.Map;
  const tilePixelSize = 32;
  const rootStore = useContext(RootStoreContext);
  const { openModal } = rootStore.modalStore;
  const { currentLocation, loadInitialLocation } = rootStore.mapStore;

  useEffect(() => {
    loadInitialLocation().then(newMap());
  }, []);

  autorun(() => {
    console.log("autorun here")
    updateMap();
  });

  const newMap = () => {
    if (currentLocation == null) {
      console.log("null currentLocation");
      return null;
    }
    // code
    // use currentLocation to load the initial map

    console.log("successfully init map");
  };

  const updateMap = () => {
    if (map == undefined) {
      return null;
    }
    console.log("update map");
    // code
  };
  console.log("add to dom");
  return <div id="map"></div>;
};

export default observer(LeafletMap);

如果我移动到任何其他页面并返回此页面，地图将被正确加载。我认为这是因为 oberservable currentLocation 已加载，因此 newMap() 不会到达 if (currentLocation == null) 和 return null.

如何确保 loadInitialLocation() 完成后只有运行s newMap()？我是不是没有正确使用 async、await 和然后？

Answer 1

我没有使用正确的方式调用newMap()

正确的做法应该是：

useEffect(() => {
    loadInitialLocation().then(() => newMap());
  }, []);

由此，我们可以确保只有当我们从 mobx 操作中获得预期结果时，我们才能执行“然后”。

useEffect(() => {
    loadInitialLocation().then((result) => {
      if (result) {
        newMap(result);
      }
    });
  }, [loadInitialLocation])

(React & Mobx & Leaflet) await 然后没有像我预期的那样工作

(React & Mobx & Leaflet) await and then are not working as I expected

reactjs

async-await

mobx