Переменная React не обновляется

Я пытался рассчитать общее время в пути между несколькими местами с помощью API Карт Google. Но при попытке доступа к переменной total_duration с приведенной выше информацией мне в консоли ничего не показывает.

const responses = [];
    let total_duration = 0;
    for(let i = 0 ; i < origins.length ; i++){
      const matrix = new google.maps.DistanceMatrixService();
      matrix.getDistanceMatrix({
        origins: origins[i],
        destinations: destinations[i],
        travelMode: google.maps.TravelMode.DRIVING,
      }, 
      function(response, status){
        responses.push(response);
      });
    }
    console.info(responses);
    for(let i = 0 ; i < responses.length ; i++){
      total_duration += responses[i].rows[0].elements[0].duration.value;
      console.info(responses[i])
    }
    console.info(total_duration);

Первый журнал консоли показывает мне все результаты для каждой пары мест.

[
  {
    "rows": [
      {
        "elements": [
          {
            "distance": {
              "text": "1.2 km",
              "value": 1161
            },
            "duration": {
              "text": "3 mins",
              "value": 169
            },
            "status": "OK"
          }
        ]
      }
    ],
    "originAddresses": [
      "3670 SW 3rd St, Miami, FL 33135, USA"
    ],
    "destinationAddresses": [
      "3911 SW 2nd Terrace, Coral Gables, FL 33134, USA"
    ]
  },
  {
    "rows": [
      {
        "elements": [
          {
            "distance": {
              "text": "1.5 km",
              "value": 1473
            },
            "duration": {
              "text": "4 mins",
              "value": 226
            },
            "status": "OK"
          }
        ]
      }
    ],
    "originAddresses": [
      "3911 SW 2nd Terrace, Coral Gables, FL 33134, USA"
    ],
    "destinationAddresses": [
      "4490 SW 5th Terrace, Coral Gables, FL 33134, USA"
    ]
  }
]

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

Теперь, когда я пытаюсь обновить state в функции getTimes, мое состояние не обновляется. Время всегда 0.


import React, {Component} from 'react';

class HomePage extends Component {

  constructor(props) {
    super(props);

    this.state = {
      time: 0,
      places: [
        {latitude: some_data, longitude: some_data},
        {latitude: some_data, longitude: some_data}
      ]
    };
  }

  componentDidMount(){}

  getTimes = () => {
    const origins = [], destinations = [];
    for(let i = 0 ; i < this.state.places.length - 1 ; i++){
      origins.push([new google.maps.LatLng(this.state.places[i].latitude, 
        this.state.places[i].longitude)]);
      destinations.push([new google.maps.LatLng(this.state.places[i + 1].latitude, 
        this.state.places[i + 1].longitude)]);  
    }
    let total_duration = 0;
    for(let i = 0 ; i < origins.length ; i++){
      const matrix = new google.maps.DistanceMatrixService();
      matrix.getDistanceMatrix({
        origins: origins[i],
        destinations: destinations[i],
        travelMode: google.maps.TravelMode.DRIVING,
      }, 
      (response, status) => {
        total_duration += response.rows[0].elements[0].duration.value;
        console.info(total_duration);
        this.setState({time: total_duration});
      });
    }
    console.info(this.state.time);    
  }

  render() {
    const {time} = this.state;
    return (
      <h1>{time}</h1>
    );
  }
}

не могли бы вы попробовать console.info(total_duration); внутри для петли

Janaka Dissanayake 08.04.2019 05:01

У меня все равно ничего не показывает, ни undefined, ни пустая строка, ни ноль.

Raul Castro Rivero 08.04.2019 05:07
matrix.getDistanceMatrix не возвращает промис, поэтому await on фактически не ожидает завершения обратного вызова — см. документация
Jaromanda X 08.04.2019 05:15

Это все еще не показывает мне ничего. Я отредактировал свой вопрос.

Raul Castro Rivero 08.04.2019 05:36

console.info(responses[i]) что показывает это

Janaka Dissanayake 08.04.2019 05:39

Он ничего не показывает внутри for. Если я уберу его из for: console.info (responses [0]), например, он покажет мне undefined.

Raul Castro Rivero 08.04.2019 05:45

удаление await не решает проблему - это по-прежнему асинхронный обратный вызов, который подталкивает к responses, с которым вы не имеете дело

Jaromanda X 08.04.2019 05:57
all the results for every couple of places - так это еще не все результаты?
Jaromanda X 08.04.2019 05:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
232
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
 this.setState(state => {
  const newTime = state.time + total_duration
  return { count: newTime }
}, () => {
  console.info(this.state.time);  
})

вы можете попробовать это, если это работает, используйте переменную состояния для total_duration с origins.length

Janaka Dissanayake 08.04.2019 05:44

Большое спасибо, он показывает мне время, но когда я выхожу из консоли, он ничего мне не показывает. Я настроил его так, чтобы total_duration оставался в состоянии, но он говорит мне, что this.setState не определено.

Raul Castro Rivero 08.04.2019 06:36

это реакция, какую функцию вы вызвали, вы связали ее в конструкторе или использовали функцию стрелки

Janaka Dissanayake 08.04.2019 06:48

Я тестировал функцию стрелки, но тогда статус не обновляется

Raul Castro Rivero 08.04.2019 07:00

Вы можете поместить весь файл js (компонент)

Janaka Dissanayake 08.04.2019 07:39

this.setState({ time: total_duration },() => { console.info(this.state.time); });

Janaka Dissanayake 08.04.2019 08:31

this.setState((prevState,props)=>{ return {time:prevState.time+total_duration}; } );

Janaka Dissanayake 08.04.2019 08:33

Большое спасибо, я обновлю ваш ответ своим кодом.

Raul Castro Rivero 08.04.2019 09:54

Другие вопросы по теме