使用嵌套异步的React-Native无法正常工作 [英] React-Native using nested async not working properly

问题描述

我有一些互惠互利的方法，我希望其中一个可以在另一个方法之后开始，但是它并不能完全按照我想要的方式工作.在另一个问题中，我在正常方法中使用了async和await，但是我没有设法使用Google APIS和嵌套函数.

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

我想用上述方法确定我的位置，然后用getcurrentloc方法获取地址信息，并计划根据该信息显示附近的一些地方.但是，我无法使该系统按顺序工作，并且我的地址始终为空.

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

这时，我通过地址从数据库中获取地址以提取ID信息.

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

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

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

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

推荐答案

您没有展示如何将信息从一种方法传递到另一种方法. 如果使用this.state进行操作，那就是问题所在.

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将不会同步更新状态.因此，在下一个函数调用中，this.state中的值可能不正确.

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

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

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

这篇关于使用嵌套异步的React-Native无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！