возвращение результатов вызова Google Distance Matrix API - PullRequest
Новая
       34

возвращение результатов вызова Google Distance Matrix API

1 голос
/ 20 марта 2020

Я разрабатываю приложение React для отслеживания продовольственных грузовиков. Я пытаюсь написать код для определения расстояния между местоположением пользователя и грузовиком с едой. Я использую Google Distance Matrix API для этого. Вот функция: 

const getTruckDistance = (userLocation, truckLocation) => {
  fetch(
    `https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=${userLocation}&destinations=${truckLocation}&departure_time=now&key=${GOOGLE_API_KEY}`
  )
    .then(res => res.json())
    .then(data => {
      console.log(data.rows[0].elements[0].distance.text);
      // return data.rows[0].elements[0].distance.text;
    });
};

Затем я сопоставляю грузовики, находящиеся в состоянии Redux, и применяю к ним эту функцию: 

{
  props.trucks && (
    <div className="card-div">
      <h3 className="trucks-category">Nearby Trucks</h3>
      <div className="trucks-div">
        {props.trucks.slice(0, 3).map(truck => (
          <Card className="truck-card">
            <CardActionArea>
              <CardMedia
                className={classes.media}
                image={truck.image}
                title="Contemplative Reptile"
              />
              <CardContent>
                <Typography
                  className="truck-name"
                  gutterBottom
                  variant="h5"
                  component="h2"
                >
                  {truck.name}
                </Typography>
                <Typography className="cuisine-type" component="h3">
                  {truck.cuisine_type}
                </Typography>
                <Typography className="distance-plus-rating" component="h3">
                  {console.log(
                    `props.location: ${
                      props.location
                    }, truck.current_location: ${truck.current_location}`
                  )}
                  {console.log(
                    getTruckDistance(props.location, truck.current_location)
                  )}
                </Typography>
              </CardContent>
            </CardActionArea>
          </Card>
        ))}
      </div>
    </div>
  );
}

Когда я это делаю, я получаю консоль .log из getTruckDistance fn без проблем. Он показывает мне расстояние между местоположением пользователя и каждым отображаемым грузовиком.

Однако, когда я пытаюсь записать фактический результат вызова fn и передачи местоположения пользователя (props.location) и местоположения грузовика (truck.current_location), я получаю неопределенный вход в консоль.

Мне нужна эта информация, чтобы показать расстояние между грузовиком и пользователем и отобразить его на экране вместе с каждым грузовиком. Что я здесь не так делаю?

Вот изображение, иллюстрирующее результаты моего console.log: enter image description here

Где я получаю неопределенность, я должен быть получение фактических расстояний: 5,8 мили, 1,4 мили и 5,4 мили соответственно.

...