Javascript 如何遍历json api数据对象

我正在尝试使用天气api获取特定位置的当前温度。我想使用天气api的响应，并使用react存储在State中

我的问题是，我在遍历json数据时不断遇到错误

WeatherApp.js:53未捕获类型错误：无法读取未定义的属性“temp_c”

下面是我记录到控制台的json响应数据

每个请求这里是天气的响应。当前

代码：

import React，{useffect，useState}来自“React”；
从“Axios”导入Axios；
函数WeatherApp（）{
const[weather，setWeather]=useState（[]）；
useffect（（）=>{
异步函数getWeather（）{
Axios.get(
"https://api.weatherapi.com/v1/current.json?key=xxxx&q=40507"
)
。然后（响应=>{
setWeather（response.data）；
})
.catch（e=>console.log（“发生了一个错误”）；
}
getWeather（）；
}, []);
返回(
你好
{console.log（weather.current.temp_c）}
//我可以在执行以下操作时打印到控制台
{console.log（weather.curret）}
);
}
导出默认WeatherApp；

---

我没有正确地遍历json数据吗？

您指定的

weather

的默认值是

[]

：一个空数组

[]当前的

将是未定义的，因此会出现错误

---

或者使用更完整的默认数据集。或者测试

weather.current

是否有值。

您指定的

weather

的默认值是

[]

：空数组

[]当前的

将是未定义的，因此会出现错误

---

或者使用更完整的默认数据集。或者测试weather.current是否有值。

您忘记了效果是异步的

在第一次渲染时，

weather

将被设置为

[]

，因为

useState

正是将其设置为该值。将要在以后完成的效果排队，然后渲染预效果元素：

return (
    <div>
      <h1>hello!</h1>
      {console.log(weather.current.temp_c)}
    </div>
  );

返回(
你好
{console.log（weather.current.temp_c）}
);

由于

weather

等于

[]

，

weather.current

是

未定义的

<代码>未定义。temp_c是一个

类型错误

---

将您的

控制台。日志

放在获取数据后运行的代码中。

您忘记了您的效果是异步的

在第一次渲染时，

weather

将被设置为

[]

，因为

useState

正是将其设置为该值。将要在以后完成的效果排队，然后渲染预效果元素：

return (
    <div>
      <h1>hello!</h1>
      {console.log(weather.current.temp_c)}
    </div>
  );

返回(
你好
{console.log（weather.current.temp_c）}
);

由于

weather

等于

[]

，

weather.current

是

未定义的

<代码>未定义。temp_c是一个

类型错误

---

将您的

console.log

放在获取数据后运行的代码中。

您可以在错误中添加

console.log

，以便更好地了解<代码>捕获（e=>console.log（e））并在此处共享结果。您好，错误不是来自api请求。错误来自

{console.log（weather.current.temp_c）}

尝试在控制台中输出

{console.log（weather.current）}

，查看它是否返回任何数据或返回未定义的数据

{Object.keys（weather.length>0？console.log（weather.current.temp_c）：'}

@KetanRamteke更新了问题，添加了您请求的图像。那很好。但是，当我执行

{console.log（weather.current.temp_c}

操作时，我会收到错误消息，您可以在错误中添加

console.log

，以便您有更好的主意。

catch（e=>console.log（e））；

并在此处共享结果。嗨，错误不是来自api请求。错误来自

{console.log]（weather.current.temp_c）}

尝试在控制台中输出

{console.log（weather.current）}

，查看它是否返回任何数据或返回未定义的数据

{Object.keys（weather.length>0？console.log（weather.current.temp_c）：“”

@KetanRamteke更新了问题，添加了您请求的图像。这很好。但是当我执行

{console.log（weather.current.temp_c}

时，如果是这种情况，我会收到错误消息。为什么当我执行

{console.log（weather.current）}

时，我能够打印到控制台而没有收到错误？因为

[].current

计算为

未定义

而不是抛出TypeError。访问对象值的任何未定义属性将返回

未定义

。相反，尝试访问

null

或

未定义

值的任何属性会抛出

TypeError

。明白了，谢谢。解决此问题的最佳方法是什么nd这个？我应该设置一个虚拟的初始状态吗？这取决于你的目标是什么。我猜你的最终目标不是控制台记录一些东西。相反，你会想为用户呈现一些东西，让他们知道数据正在加载，这样你就可以检查

天气
是否没有填充，并返回类似微调器的东西。然后什么时候效果完成后，您的组件将使用填充的
weather
状态重新渲染。如果是这种情况，为什么我在执行
{console.log（weather.current）}
操作时能够打印到控制台，而没有收到错误？因为
[].current
的计算结果为
未定义
，而不是抛出TypeError。访问对象值的任何未定义属性将返回
未定义
。相反，尝试访问
null
或
未定义
值的任何属性会抛出
TypeError
。明白了，谢谢。获取该属性的最佳方法是什么