#javascript #arrays #reactjs #react-native
#javascript #массивы #reactjs #react-native
Вопрос:
Я работаю над измерением расстояния между двумя точками, используя geolib
библиотеку в react native. Я пытаюсь выяснить, как лучше всего сопоставить существующий массив мест, каждое из которых находится в объекте, и добавить поле, которое показывает расстояние между этим местом и статическим местоположением. Я чувствую, что я близок, но не уверен, поскольку на данный момент я получаю обещание, которое я не уверен, как разрешить. Ниже приведен мой код, ценю помощь:
import { getDistance } from "geolib";
const state ={
places:[
{
site_id:'1',
latitude: 40.763470,
longitude: -73.929032
},
{
site_id:'2',
latitude: 40.6010,
longitude: -73.9643
},
],
location: {
latitude: 40.8019,
longitude: -73.9786
}
}
const calculateDistance = async (start_x,start_y, end_x,end_y) => {
try {
let distance = await getDistance(
{
latitude: start_x,
longitude: start_y,
},
{
latitude: end_x,
longitude: end_y,
},
//(accuracy = 100)
);
return(distance);
} catch (error) {
console.log(error)
}
}
const map1 = state.places.map(court=> ({ ...place, distance: calculateDistance(
place.latitude,
place.longitude,
location.latitude,
location.longitude
) }))
console.log(map1)
В настоящее время я получаю обещание.
Желаемый результат
places:[
{
site_id:'1',
latitude: 40.763470,
longitude: -73.929032,
distance: //whatever the distance is
},
{
site_id:'2',
latitude: 40.6010,
longitude: -73.9643,
distance: //whatever the distance is
},
]
Ответ №1:
Не похоже, что getDistance на самом деле является асинхронной функцией. Вы можете просто использовать его возвращаемое значение.
const state = {
places: [
{
site_id: "1",
latitude: 40.76347,
longitude: -73.929032
},
{
site_id: "2",
latitude: 40.601,
longitude: -73.9643
}
],
location: {
latitude: 40.8019,
longitude: -73.9786
}
};
const calculateDistance = (start_x, start_y, end_x, end_y) => {
try {
let distance = getDistance( // <-- not async function, no need to await
{
latitude: start_x,
longitude: start_y
},
{
latitude: end_x,
longitude: end_y
}
//(accuracy = 100)
);
return distance;
} catch (error) {
console.log(error);
}
};
const map1 = state.places.map((place) => ({
...place,
distance: calculateDistance(
place.latitude,
place.longitude,
state.location.latitude,
state.location.longitude
)
}));
console.log(JSON.stringify(map1));
Ответ №2:
Да, это происходит потому getDistance
, что функция асинхронна, как вы заметили, поскольку вы используете await
. Итак, когда вы сопоставляете каждое значение этого массива с помощью getDistance
функции, все сопоставленные значения остаются Promises
(и, скорее всего, неразрешенными), поэтому он просто возвращает это синхронно.
Теперь, что вы, вероятно, хотите сделать, это:
-
Создайте асинхронную функцию для сопоставления всех значений
const getDistances = асинхронный массив => Promise.all(array.map(асинхронное местоположение => { const distance = await.getDistance(местоположение.широта, местоположение.долгота, состояние.широта, состояние.долгота) возвращает {…расстояние, местоположение} }))
-
Используйте эту новую функцию для извлечения значений и консоли.войдите в систему следующим образом, используя
.then()
илиasync/await
:getDistances(state.places).then(console.log)
Я думаю, что в некоторых ваших переменных были опечатки, поэтому в моем коде они тоже есть, но я думаю, вы понимаете суть. То, что мы пытаемся сделать resolve
getDistances
, — это использовать функцию после того, как каждое местоположение собрало свое местоположение.