React-Native 应用程序异步数据检索无法正常工作

Question

我将componentDidMount方法作为async使用并进行了一些操作，但是系统返回给我的是第一个条目的状态而不是异步工作。

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

此时控制台日志变为空。但是，当我通常检查时，会观察到数据输入，但会在一段时间后出现。这同样适用于 currentloc 方法。这些方法从数据库中提取一些数据。

和城市功能：

  getCityList() {
    let link = "http://..../Cities";
    fetch(link)
      .then(response => response.json())
      .then(res => {
        this.setState({
          cities: res,
        })
      })
      .catch(error => console.warn(":::::::::", error));
  }

Answer 1

您需要在getCityList 方法中返回Promise。

没有return：

async function foo() {
  const result = await baz();
  console.log('Result', result);

  console.log('Should be called after baz!');
}

function baz() {
  new Promise((resolve) => {
    setTimeout(() => resolve('Hello from baz!'), 3000);
  });
}

foo();

return：

async function foo() {
  const result = await baz();
  console.log('Result', result);

  console.log('Should be called after baz!');
}

function baz() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('Hello from baz!'), 3000);
  });
}

foo();

以下是使await 工作的正确方法（使用您的示例 sn-p）：

 getCityList() {
    let link = "http://..../Cities";
    return fetch(link) // Added a return here
      .then(response => response.json())
      .then(res => {
        this.setState({
          cities: res,
        })
      })
      .catch(error => console.warn(":::::::::", error));
  }