React-Native应用异步数据获取异常问题求助

你的问题核心在于**getCityList方法没有返回Promise**，导致await关键字无法正确等待异步请求完成，代码会直接跳过等待继续执行，所以你在await this.getCityList()后立刻console.log时，setState还没完成更新，自然输出空值。

第一步：修复getCityList方法，让它返回Promise #

你需要把fetch调用的Promise返回出去，这样await才能捕获到异步操作的完成信号：

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

如果你更习惯async/await的写法，也可以把getCityList改成异步函数：

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

第二步：处理setState的异步特性 #

另外要注意：React的setState本身也是异步的。即使你await了getCityList，立刻console.log(this.state.cities)仍然可能拿到旧值（因为setState的状态更新是批量延迟处理的）。如果需要在状态更新后执行操作，推荐使用setState的回调函数：

async componentDidMount() {
  await this.getCityList();
  // 通过setState的回调获取更新后的状态
  this.setState(prevState => {
    console.log(prevState.cities); // 这里能拿到最新的cities数据
    return {}; // 不需要修改状态，返回空对象即可
  });
  
  // 同样，确保currentLocation方法也返回Promise，否则await同样无效
  await this.currentLocation();
}

第三步：检查currentLocation方法 #

你的currentLocation肯定也存在和getCityList一样的问题——没有返回Promise。按照上面的方法修改它，让它返回异步操作的Promise，await才能生效。

内容的提问来源于stack exchange，提问作者Artun Burak Mecik