React Native: как мне применить пользовательскую функцию к массиву объектов и вернуть измененный массив в Javascript с дополнительным полем?

#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));
  

Редактировать react-native-как-мне-применить-пользовательскую-функцию-к-массиву-объектов-и-return

Ответ №2:

Да, это происходит потому getDistance , что функция асинхронна, как вы заметили, поскольку вы используете await . Итак, когда вы сопоставляете каждое значение этого массива с помощью getDistance функции, все сопоставленные значения остаются Promises (и, скорее всего, неразрешенными), поэтому он просто возвращает это синхронно.

Теперь, что вы, вероятно, хотите сделать, это:

  1. Создайте асинхронную функцию для сопоставления всех значений

    const getDistances = асинхронный массив => Promise.all(array.map(асинхронное местоположение => { const distance = await.getDistance(местоположение.широта, местоположение.долгота, состояние.широта, состояние.долгота) возвращает {…расстояние, местоположение} }))

  2. Используйте эту новую функцию для извлечения значений и консоли.войдите в систему следующим образом, используя .then() или async/await :

    getDistances(state.places).then(console.log)

Я думаю, что в некоторых ваших переменных были опечатки, поэтому в моем коде они тоже есть, но я думаю, вы понимаете суть. То, что мы пытаемся сделать resolve getDistances , — это использовать функцию после того, как каждое местоположение собрало свое местоположение.