如何遍历json api数据对象

Question

我正在尝试使用天气 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 数据吗？

Answer 1

weather您指定的 的默认值是[]：一个空数组。[].current将是未定义的，因此会出现错误。要么使用一组更完整的默认数据。或测试是否weather.current具有价值。

Answer 2

您忘记了您的效果是异步的。在第一个渲染中，weather将被设置为[]，因为这就是useState设置它的原因。您将要在稍后完成的效果排队，然后渲染效果前的元素：return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <h1>hello!</h1>&nbsp; &nbsp; &nbsp; {console.log(weather.current.temp_c)}&nbsp; &nbsp; </div>&nbsp; );由于weather等于[]，weather.current是undefined。undefined.temp_c是一个TypeError。放置在获取数据后console.log运行的代码。