React API 未显示数据

Question

我无法从 API 中检索内容，每次我重新加载我的页面时都会显示错误，请查看所附图片，我想使用 Weather API 和正确的方式查找天气详细信息现在我使用的是静态经纬度。

import React, { useState, useEffect } from "react";
import axios from "axios";
import { FaRegSun } from "react-icons/fa";
import "./stylesheets/stylesheets.css";

function WeatherApp1() {
  const [weatherData2, setWeatherData2] = useState({});

  const API_endpoint2 = `https://api.openweathermap.org/data/2.5/onecall?`;
  const API_key = `2a63c27d8ba0b0d14c9e5d59f39ee1ba`;

  useEffect(() => {
    async function getSecondObject() {
      const response = await axios.get(
        `${API_endpoint2}lat=28.4360704&lon=77.021184&units=metric&appid=${API_key}`
      );
      setWeatherData2(response.data);
    }
    getSecondObject();
  }, []);

  return (
    <div className="mainDiv">
      <div className="heading">
        <h1>
          <FaRegSun /> Weather
        </h1>
      </div>
      {weatherData2.current.temp}
    </div>
  );
}

export default WeatherApp1;

https://i.stack.imgur.com/oqr7i.jpg

Answer 1

您的代码的问题是您试图在从 weather API 返回 data 之前呈现 {weatherData2.current.temp}，这就是为什么您的 weatherData2 将是undefined 而 rendering.

您可以添加一个 loading state 来检查 data 是 rendering 还是已经 rendered。

您可以试试下面的代码：

import React, { useState, useEffect } from "react";
import axios from "axios";
import { FaRegSun } from "react-icons/fa";
import "./stylesheets/stylesheets.css";

function WeatherApp1() {
  const [loading, setLoading] = useState(true) // Loading state
  const [weatherData2, setWeatherData2] = useState({});

  const API_endpoint2 = `https://api.openweathermap.org/data/2.5/onecall?`;
  const API_key = `2a63c27d8ba0b0d14c9e5d59f39ee1ba`;

  useEffect(() => {
    async function getSecondObject() {
      const response = await axios.get(
        `${API_endpoint2}lat=28.4360704&lon=77.021184&units=metric&appid=${API_key}`
      );
      setWeatherData2(response.data);
      setLoading(false) // Setting the loading state to false after data is set.
    }
    getSecondObject();
  }, []);

  return (
    <div className="mainDiv">
      <div className="heading">
        <h1>
          <FaRegSun /> Weather
        </h1>
      </div>
       {/* Checking for loading state before rendering the data */}
      {loading ? (
         <p>Loading...</p>
      ) : (
         weatherData2.current.temp            
      )}
    </div>
  );
}

export default WeatherApp1;

React API 未显示数据

React API not showing the data

javascript

async-await

reactjs

axios