时间戳

首页 > 解决方案 > 如何将对象分配给数组中的正确对象？反应原生

javascript - 如何将对象分配给数组中的正确对象？反应原生

问题描述

我从服务器获取这个数组：

[{
  "res_id": 0,
  "res_name": "string",
  "res_desc": "string",
  "res_address": "string"
},
etc
]

我必须在地图上显示一个标记列表，所以我将我的restos映射到标记以填充坐标，第一个问题是我从服务器获得的数据，它是一个地址，所以我打电话：

restos.forEach(x => FetchGeocoder(x.res_address));

然后使用地理编码器获取：

const FetchGeocoder = async (address) => {
        const response = await fetch('https://maps.googleapis.com/maps/api/geocode/json?address=' +
            address + ',' +
            'CABA&key=' + "KEY")
        const responseData = await response.json();
        const markers = responseData.results[0].geometry.location;
        restos.forEach(x => {
            x.res_coords = {
                latitude: markers.lat,
                longitude: markers.lng
            }
        });
    };

我无法解决的问题是我得到了 3 个坐标对象，因为我的数组中有 3 个恢复，但只有 1 个坐标对象分配给我所有的恢复，而不是每个坐标都分配给正确的恢复。

提前感谢您的任何帮助或帮助！

标签： javascriptreact-native

解决方案

一种选择是在数组的每次迭代期间使用async/await来执行异步函数调用（即 to ）。fetchGeocode()restos

例如，您可以调整您的代码以使用以下（或类似）模式：

/* Define async fetchGeocode() function that returns lat/lng data */
const fetchGeocode = async (address) => {
  const res = await fetch('https://maps.googleapis.com/maps/api/geocode/json' + 
                          '?address=' + address + ',CABA&key=' + API_KEY);

  const json = await res.json();
  const { lat, lng } = json.results[0].geometry.location;

  return {
    latitude: lat,
    longitude: lng
  };
};

// Async function adds coords to each resto
async function addCoordsToRestos(restos) => {

  // If restos undefined, or not an iterable array type then return
  // an empty array as a default response
  if(!Array.isArray(restos)) {
      return [];
  }

  // Iterate each resto
  for (const resto of restos) {

    // Mutate current resto by adding res_coords. Call fetchGeocode() 
    // with await to wait for async function to complete before next
    // iteration
    resto.res_coords = await fetchGeocode(resto.res_address);
  }

  // Return mutated restos array to next handler
  return restos
}

用法将如下所示：

// If called inside an async function
await addCoordsToRestos( restos );

或者：

// If called as a promise
addCoordsToRestos( restos ).then(() => { console.log('done') });

推荐阅读