Я пытался рассчитать общее время в пути между несколькими местами с помощью 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>
);
}
}
У меня все равно ничего не показывает, ни undefined, ни пустая строка, ни ноль.
matrix.getDistanceMatrix не возвращает промис, поэтому await on фактически не ожидает завершения обратного вызова — см. документацияЭто все еще не показывает мне ничего. Я отредактировал свой вопрос.
console.info(responses[i]) что показывает это
Он ничего не показывает внутри for. Если я уберу его из for: console.info (responses [0]), например, он покажет мне undefined.
удаление await не решает проблему - это по-прежнему асинхронный обратный вызов, который подталкивает к responses, с которым вы не имеете дело
all the results for every couple of places - так это еще не все результаты?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


this.setState(state => {
const newTime = state.time + total_duration
return { count: newTime }
}, () => {
console.info(this.state.time);
})
вы можете попробовать это, если это работает, используйте переменную состояния для total_duration с origins.length
Большое спасибо, он показывает мне время, но когда я выхожу из консоли, он ничего мне не показывает. Я настроил его так, чтобы total_duration оставался в состоянии, но он говорит мне, что this.setState не определено.
это реакция, какую функцию вы вызвали, вы связали ее в конструкторе или использовали функцию стрелки
Я тестировал функцию стрелки, но тогда статус не обновляется
Вы можете поместить весь файл js (компонент)
this.setState({ time: total_duration },() => { console.info(this.state.time); });
this.setState((prevState,props)=>{ return {time:prevState.time+total_duration}; } );
Большое спасибо, я обновлю ваш ответ своим кодом.
не могли бы вы попробовать console.info(total_duration); внутри для петли