javascript - 将 promise 返回的值推送到数组中

Question

我在 react 中有这个基本的 google map api，它只是在 componentDidMount 中的 map 上放置了一些标记。为此，我需要使用 Geocode 将位置(纽约 Green Street，nr.11)转换为经纬度对。这部分工作正常，代码如下:

  componentDidMount() {
    let usersLocations = [];
    this.props.users.map(user => {
      const userAddress =
        "Street " + user.street + " " + user.nr + ", " + user.city;
      Geocode.fromAddress(userAddress).then(
        response => {
          const result = { user: user, coord: response.results[0] };
          userLocations.push(result);
        },
        error => {}
      );
    });
    console.log(usersLocations) //outputs []
  }

问题是，如果我直接将 setState 设置到 Geocode 的回调中，我会多次执行此操作，因为我正在从 props 迭代用户。我的想法是将每个位置插入一个数组，然后为整个数组设置一次 setState。问题是，我无法将结果推送到数组中，因为我在回调中，当我从地理编码获得响应时，usersLocations 数组已经记录到控制台。我应该如何处理这个问题？

Answer 1

在设置状态前需要使用Promise.all收集所有数据

componentDidMount() {
    Promise.all(this.props.users.map(user => {
      const userAddress =
        "Street " + user.street + " " + user.nr + ", " + user.city;
      return Geocode.fromAddress(userAddress).then(
        response => ({ user: user, coord: response.results[0]}),
        error => {}
      );
    })).then(usersLocations => this.setState({ usersLocations }));
  }