使用嵌套异步的 React-Native 无法正常工作

Question

我有一些彼此受益的方法，我希望其中一个接一个开始，但它并不能完全按照我想要的方式工作。在另一个问题中，我在正常方法中使用了 async 和 await，但是我没有设法使用 google APIS 和嵌套函数。

async componentDidMount() {
    await this.getCityList();
    console.log(this.state.cities)
    await this.currentLocation();
    await this.getVenueInformation();
  }

此时，第一个函数正常工作，通过所需的函数后，它转到第二个方法。同样的方法，我必须把第二种方法的输入放到第三种方法中，但是我失败了。

Current location method:
    currentLocation() {
        Geocoder.init(...);
        Geolocation.getCurrentPosition((position) => {
          this.getCurrentLoc(position.coords.latitude, position.coords.longitude),
            this.setState({
              region: {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
              },
              error: null,
            });
        }, (error) => this.setState({ error: error.message }), { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 });
      }

我想用上面的方法我的位置，然后我用getcurrentloc方法得到地址信息，我打算根据那个信息显示附近的一些地方。但是，我无法让这个系统按顺序运行，我的地址总是为空。

  getCurrentLoc(lat, longt) {
    Geocoder.from(lat, longt)
      .then(json => {....
        this.setState({...},
          this.getLocIDS(cityName, districtName, neighborhoodName)
        );
      })
      .catch(error => console.warn(error));
  }

此时，我通过地址从数据库中获取地址来拉取id信息。

  getLocIDS(cityName, districtName, neighborhoodName) {
    let link = ..;
    fetch(link)
      .then(response => response.json())
      .then(res => {
        this.setState({,,,,,,})
      })
      .catch(error => console.warn(error));
  }

最后，我想捕获场地信息，但此时数据在数据库中输入为-1。 -1 是我的初始状态值。我确信所有方法都可以正常工作，但是由于进程不是按顺序运行的，因此我的空间搜索方法在更新之前函数状态的数据之前就可以工作。

  getVenueInformation() {
    let link = ...
    fetch(link)
      .then(response => response.json())
      .then(venues => {
          this.setState({
            markers: venues,
            isLoading: false,
          })
      })
  };

数据库输入返回：>>>>> SELECT * FROM mekanlar WHERE mekanlar.mahalle_no="-1";

Answer 1

您没有展示如何将信息从一种方法传递到另一种方法。 如果你使用this.state 来做这件事，那就是你的问题所在。

this.setState 不会同步更新状态。因此，在下一个函数调用中，this.state 中的值可能不正确。

为确保数据流正确，显式返回值更有意义，即使您在内部执行setState。

async componentDidMount() {
    const cityList = await this.getCityList();
    console.log(cityList)
    const location = await this.currentLocation(cityList);
    const venueInformation = await this.getVenueInformation(location);
}