Question

我在react中有这个基本的Google Map API，它只是在componentDidMount中的地图上放了一些标记。为此，我需要使用Geocode才能将位置（格林街，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 []
  }

问题是，如果我直接从Geocode中将setState设置到回调中，由于要遍历道具中的用户，因此我要执行多次。我的想法是将每个位置推入数组，然后对整个数组执行一次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 }));
  }

将诺言返回的值推入数组

1 个答案: