React-Native using nested async not working properly

Question

I have methods that benefit each other and I want one of them to start after the other, but it doesn't work exactly the way I want it. In another question, I used async and await in a normal method, but I did not manage to use google APIS and nested functions.

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

At this point, the first function works correctly and after passing the required ones, it goes to the 2nd method. In the same way, I have to put the inputs of the 2nd method into the 3rd method, but I failed.

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

I want my location with the above method, then I get the address information with getcurrentloc method and I plan to show some places in the vicinity in accordance with that information. However, I could not make this system work sequentially and my address is always null.

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

at this point, I get the address from the database by address to pull the id information.

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

lastly, I want to capture the venue information, but at this point the data is entered as -1 in the database. -1 is my initial state value. I'm sure all methods work correctly, but since the processes don't run sequentially, my space search method works before updating the data in the previous functions state.

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

database input return: >>>>> SELECT * FROM mekanlar WHERE mekanlar.mahalle_no="-1";

score 0 · Accepted Answer · answered Dec 19 '19 at 17:20

0

You don't show how you pass the information from one method to the other. If you do it by use of this.state, that is where your problem is.

this.setState will not update the state synchronously. So you might not have the right value in this.state in your next function call.

To make sure the data flow is correct, it makes more sense to return the values explicitly, even if you do setState internally.

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

answered Dec 19 '19 at 17:20

Tiberiu Maran

1,983
16
23

I use **await this.currentLocation ()** in **async componentDidMount ();** I give each function as a parameter to each function that starts in **this.getCurrentLoc (position.coords.latitude, position.coords.longitude)** and this.getLocIDS **(cityName, districtName, neighborhoodName)** However, I update to setStatete in the **getLocIDS (cityName, districtName, neighborhoodName)** method used **await this.getVenueInformation ()** method but its not used updated state, which I called from the **async componentDidMount ()** method. – Artun Burak Mecik Dec 19 '19 at 17:29
I'm not sure I can give a lot more insight. It might make sense to mention that you'll find it easier to understand the code and debug if you're consistent in your use of asynchronicity. Try to refactor everything to use async/await, and you should find it easier to track the control flow. You can use [this trick](https://stackoverflow.com/a/45744345/4377932) to make setState awaitable. – Tiberiu Maran Dec 19 '19 at 17:48

React-Native using nested async not working properly

1 Answers1

Linked