Возникла проблема с получением значения, возвращаемого из вложенной функции в React. Может быть, объем, но, возможно, проблема с асинхронным - PullRequest
Новая
       54

Возникла проблема с получением значения, возвращаемого из вложенной функции в React. Может быть, объем, но, возможно, проблема с асинхронным

0 голосов
/ 15 января 2019

Я подключаю пользовательский интерфейс API к Google Maps. В каждом местоположении свойство longLat я вызываю функцию calculateDistances, чтобы получить аргументы, необходимые для вызова API Google Matrix.

Вот где происходит этот звонок: 

{Object.keys(this.state.locations).map((i) => {
   let locale = this.state.locations[i];
   return <Location name={locale.name}
   address={locale.address}
   longLat={locale.longLat}
   needsCode={locale.needsCode}
   needsKey={locale.needsKey}
   distances={this.calculateDistances(locale.longLat)}
   handicapAccess={locale.handicapAccess}
   code={locale.code}
   id={locale.id} />
})},

Фактический вызов Google Distance Matrix API вкладывается в функцию calculateDistances. В этой вложенной функции я устанавливаю расстояние, которое возвращается из вызова в качестве переменной: «dist». 

calculateDistances(longLat) {
    const origins = [Object.values(this.state.currentLocation).join()];
    const destinations = [Object.values(longLat).join()];
    const travelMode = this.state.travelMode.length ? this.state.travelMode : 'WALKING';
    distance.matrix(origins, destinations, travelMode, (err, distances) => {
      let dist = distances.rows[0].elements[0].distance.text;
    })
    return dist;
}

Это прекрасно работает и внутри вложенной функции dist определяется правильно. Однако я не могу заставить переменную dist возвращаться из всей функции calculateDistances.

Итак ... distance.matrix выполняет вызов API (google-distance-matrix импортируется как distance вверху компонента) и получает переменную dist, установленную правильно.

Как получить dist, который будет возвращен общей функцией calculateDistances? На данный момент он возвращается undefined.

...