无法使用点或括号表示法访问 json/javascript 对象中的键或数据，该对象在提取后保存到状态

Question

我目前正在学习 react-native，经过一段时间的反应后，我遇到了一个我不明白的奇怪事件。

我正在从 API 中获取 JSON 文件并将其保存在我的状态中。在文件的其他地方，当我尝试使用点和括号表示法访问值时，它打破了我的代码，说 'undefined is not an object' 并且这个常量的值确实是未定义的。但奇怪的是，如果我然后在我的 fetch 和 dot/bracket 符号中使用 setState 来获取特定值，它就可以正常工作。但是我想在其他地方拥有此功能，而我将大量映射数据。

我读到我可能需要使用 JSON.parse，但可以弄清楚将它放在我的提取中的什么位置，它 return 在 console.log.[=23= 中出错了]

JSON.stringify 有效，但我只有一个巨大的字符串，所以失去了对象的力量。

点和括号表示法都试过了，正如我所说，在 fetch 中工作得很好，但是在调用状态时

首先将状态设置为 const，然后将其传递给 console.log，没有区别。

fetchWeather(lat = 15, lon = 85) {
    fetch(
      `http://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&APPID&APPID=${API_KEY}&units=metric`,
    )
      .then(res => res.json())
      .then(json => {
        this.setState({
          forecast: json.list,
          temp: json.list[0].main.temp // WORKS! returns temp eg 25.34
          isLoading: false,
        });
      })
      .catch(error => console.log(error));
}

console.log(this.state.forecast[0]); //works I get the first index of an array of objects but has and added key Object {}
console.log(this.state.forecast[0].main.temp); //undefined
console.log(this.state.forecast[0]['main']['temp']); //undefined

我看到这个 Object {} 出现在控制台中，但也许这没什么好担心的？

例如

"main": Object {
    "grnd_level": 1008.34,
    "humidity": 54,
    "pressure": 1013.04,
    "sea_level": 1013.04,
    "temp": 28.1,
    "temp_kf": 4.74,
    "temp_max": 28.1,
    "temp_min": 23.36,
},

应该是，

"main": {
    "grnd_level": 1008.34,
    "humidity": 54,
    "pressure": 1013.04,
    "sea_level": 1013.04,
    "temp": 28.1,
    "temp_kf": 4.74,
    "temp_max": 28.1,
    "temp_min": 23.36,
  },

我希望 console.log(this.state.forecast[0].main.temp) return 23.45 和 console.log(this.state.forecast[0]['main'])return

"grnd_level": 1008.34,
"humidity": 54,
"pressure": 1013.04,
"sea_level": 1013.04,
"temp": 28.1,
"temp_kf": 4.74,
"temp_max": 28.1,
"temp_min": 23.36,

https://samples.openweathermap.org/data/2.5/forecast?lat=35&lon=139&appid=b6907d289e10d714a6e88b30761fae22

https://openweathermap.org/forecast5

Answer 1

我认为是您 Gist 中的这一部分导致了错误：

if (this.state.forecast !== {}) {
  console.log(this.state.forecast[0].main);
}

您正在用一个空对象 {} 初始化您的 state.forecast 并尝试检查它。

从数据结构的角度来看，这有点误导，因为实际内容将是一个数组。

不过，更重要的是，这两个变量是通过标识进行比较的，并且右操作数是每次调用 render 时在堆栈上新创建的空对象，并且永远不会等于 forecast。因此，条件总是评估为 true，这会导致尝试访问在第一次渲染时还不存在的数据。

由于您只是在等待 forecast 通过 fetch 调用填充，并且 forecast 的内容已知，因此初始化 state 和 forecast: null（或根本不设置），然后检查是否设置了 forecast（不是 false、不是 null、不是 undefined、不是 0，不是 '',...):

if (this.state.forecast) {
  console.log(this.state.forecast[0].main);
}

或者更严格一点：

if (typeof this.state.forecast === 'object') { // typeof array is also 'object'
  console.log(this.state.forecast[0].main);
}

无法使用点或括号表示法访问 json/javascript 对象中的键或数据，该对象在提取后保存到状态

Cant use dot or bracket notation to access keys or data in json/javascript object saved to state after fetch

javascript

json

reactjs

fetch

native