Question

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

  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的正确方法（使用您的示例代码段）：

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

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

1 个答案: