Question

在我的React本机应用程序中，我有一个对象数组，每个对象有3个属性：地址，纬度和经度。纬度和经度最初为空，因此我使用google api进行反向地理编码。由于它是一个数组，我在我的数组中循环并获取google url以从给定地址获取lat和lng。但是当我尝试在我的对象中保存纬度和经度时，我有一个错误：

TypeError：undefined不是对象（评估： locations [i] .latitude = responseJson.results [0] .geometry.location.lat）

这是我的代码：

for (var i = 0; i < locations.length; i++){

          if (locations[i].address){

            var googleRequestUrl = this.state.GoogleAPIUrl + locations[i].address;

            fetch(googleRequestUrl)
            .then((response) => response.json())
            .then((responseJson) => {
              locations[i].latitude = responseJson.results[0].geometry.location.lat;
              locations[i].longitude = responseJson.results[0].geometry.location.lng;
            })
            .catch((error) => {
              console.warn(error);
            })
            .done();
          }
        }

我使用的Google API是：“https://maps.googleapis.com/maps/api/geocode/json?address=”

我已经检查过我是否收到了response.text（）的响应：它给了我一个完整的响应，包括lat和lng。

我无法理解为什么它会给我这个错误，我做错了什么？在循环中获取是否有问题？或问题是别的什么？

赞赏任何建议或更好的解决方案

Answer 1

您的某个地址可能无法正确地进行地理编码，并且您尝试访问响应对象上的不存在的结果。

我会检查结果是否存在并继续相应。

const result = responseJson.results[0];
if (result) {
    locations[i].latitude = result.geometry.location.lat;
    locations[i].longitude = result.geometry.location.lng;
}

Answer 2

此代码：

.then((responseJson) => {
    locations[i].latitude = responseJson.results[0].geometry.location.lat;
    locations[i].longitude = responseJson.results[0].geometry.location.lng;
})

不会做你想做的事。

由于这段代码异步运行，它将使用它在执行时找到的i值。随着时间的推移，您从服务器获得响应，您的for循环已经完成执行。在for循环结束时i的值是多少？它将是4.

因此，您将尝试在locations[4]中存储未定义的值（对于每次获取）。

要解决此问题，您可以做一些事情：
1.如果使用ES6，最简单的方法是在for循环中声明一个等于循环变量的常量。这基本上会在索引上创建一个闭包，以便稍后引用正确的值。它看起来像是：

for (var i = 0; i < locations.length; i++){
    if (locations[i].address){
        var googleRequestUrl = this.state.GoogleAPIUrl + locations[i].address;

        const index = i;
        fetch(googleRequestUrl)
        .then((response) => response.json())
        .then((responseJson) => {
            locations[index].latitude = responseJson.results[0].geometry.location.lat;
            locations[index].longitude = responseJson.results[0].geometry.location.lng;
        })
        .catch((error) => {
            console.warn(error);
        })
        .done();
    }
}

将循环变量传递给另一个获取数据并执行更改的函数
使用数组映射函数，基本上执行＃2但使用匿名函数

```

locations.map((location) => {
    if (location.address) {
        var googleRequestUrl = this.state.GoogleAPIUrl + location.address;
        fetch(googleRequestUrl)
        .then((response) => response.json())
        .then((responseJson) => {
            location.latitude = responseJson.results[0].geometry.location.lat;
            location.longitude = responseJson.results[0].geometry.location.lng;
        })
        .catch((error) => {
            console.warn(error);
        })
        .done();
    }
);

在for

2 个答案: