Вставьте значение, возвращенное из обещания, в массив

Question

У меня есть базовый API-интерфейс Google Map, который просто добавляет маркеры на карту в componentDidMount.Для этого мне нужно использовать Geocode, чтобы преобразовать местоположение (Green Street, № 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 []
  }

Дело в том, что если я устанавливаюState непосредственно в обратный вызов из Geocode, я делаю это несколько раз, так как я перебираю пользователей изреквизит.Я думал, что нужно поместить каждое местоположение в массив, а затем установить 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 }));
  }