如何遍历json api数据对象

缺口

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

我的问题是,遍历json数据时我总是收到错误消息。

WeatherApp.js:53 Uncaught TypeError: Cannot read property 'temp_c' of undefined

这是我登录到控制台的json响应数据。

在此处输入图片说明

每个请求都是来自weather.current的响应

在此处输入图片说明

码:

import React, { useEffect, useState } from "react";
import Axios from "axios";

function WeatherApp() {
  const [weather, setWeather] = useState([]);

  useEffect(() => {
    async function getWeather() {
      Axios.get(
        "https://api.weatherapi.com/v1/current.json?key=xxxx&q=40507"
      )
        .then(response => {
          setWeather(response.data);
        })
        .catch(e => console.log("There was an error that occurred."));
    }
    getWeather();
  }, []);

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

      // I am able to print to the console when i do the following
      {console.log(weather.curret)}
    </div>
  );
}

export default WeatherApp;

我没有正确遍历json数据吗?

雅各布

您忘记了效果是异步的。

在第一个渲染中,weather将被设置为[],因为这useState就是将其设置为的原因。您将要排队的效果排队,以待日后完成,然后渲染前置效果元素:

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

既然weather等于[]weather.current就是undefinedundefined.temp_c是一个TypeError

将您console.log的代码放入获取数据运行的代码中

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

如何遍历Angular JSON对象

来自分类Dev

如何遍历HTML元素并填充Json对象?

来自分类Dev

如何使用ngFor遍历JSON嵌套对象

来自分类Dev

如何使用JavaScript遍历JSON数据?

来自分类Dev

如何通过遍历JSON查找所需数据

来自分类Java

即使使用Scala Jackson出错,也如何遍历JSON对象

来自分类Dev

如何在PHP中循环遍历JSON对象值?

来自分类Dev

如何使用Typescript(Angular2)遍历JSON对象

来自分类Dev

如何遍历JSON数组并将数据放入变量

来自分类Javascript

遍历JSON对象列表

来自分类Javascript

遍历JSON对象javascript

来自分类Javascript

Javascript:遍历JSON对象

来自分类Python

遍历JSON对象

来自分类Dev

遍历嵌套的json对象

来自分类Javascript

如何遍历JavaScript对象?

来自分类Java

如何遍历对象列表?

来自分类Java

如何遍历对象的ArrayList?

来自分类Dev

如何遍历Firebase数据

来自分类Dev

jQuery:如何遍历/遍历对象列表

来自分类Dev

使用jq遍历JSON对象

来自分类Dev

使用jQuery遍历JSON对象

来自分类Dev

遍历JSON响应对象

来自分类Java

在JAVA中遍历JSON数据

来自分类Javascript

如何遍历对象以形成条件

来自分类Dev

如何快速遍历对象数组

来自分类Dev

如何遍历匿名对象列表?

来自分类Dev

如何遍历动态键对象?

来自分类Dev

如何遍历ponyorm实体对象

来自分类Javascript

如何遍历或枚举JavaScript对象?

TOP 榜单

热门标签

归档