无法显示 API 中对象的数据

Cannot Display the Data From the object from an API

我正在使用 ReactJS 制作一个天气应用程序,对于天气,我正在使用 OpenWeatherMap API。我提取了一个数组和一个对象,因为它们是我感兴趣的。数组包含天气类型,如下雨或晴天,对象包含温度。我已经能够从数组中提取天气并将其显示在屏幕上,但我无法从对象中提取温度。控制台从未给出任何错误。这是代码:

import React, {useState,useEffect} from 'react'

function WeatherDisplay()
{
    const APIKey = "myKey";

    const [weather, setWeather] = useState([]);

    const [temperature, setTemperature] = useState([]);

    useEffect(() => {
        fetchWeather() ;
    } , []);

    const fetchWeather = async () => {
        const data = await fetch(
            "https://api.openweathermap.org/data/2.5/weather?q=Islamabad&units=metric&appid=" + APIKey
            );
        const weather = await data.json();

        //console.log(weather.weather);
        setWeather(weather.weather);

        console.log(weather.main);
        setTemperature(weather.main);
    } 

    return(
        <section id="w-d-p">
            <div style={
                        {
                            backgroundColor:"rgba(43, 42, 42, 0.575)",
                            width:"100%",
                            height:"100%",
                            display:"flex",
                            flexDirection:"column",
                            justifyContent:"center",
                            alignItems:"center"
                        }
                    } className="container-fluid">
                <div style={
                        {
                            display:"flex",
                            flexDirection:"column",
                            justifyContent:"center",
                            alignItems:"center"
                        }
                    } className="col-sm-12">

                    <h2 id="city">Islamabad</h2>

                    {weather.map(main => (
                        //<h2 key={main.id} id="temp">{main.temp}C</h2>
                        console.log(main.temp)
                    ))}
                    
                    {weather.map(weather => (
                        <h2 key={weather.id} id="weather">{weather.main}</h2>
                    ))}
                </div>
            </div>
        </section>
    )
}

export default WeatherDisplay

抱歉,我不得不删除 API 键。 现在在console.log()之前return()
并在控制台中显示温度。我注释掉了 h2 标签并将 console.log() 放在那里,现在,控制台给出 undefined 然后在下一行打印整个对象并在下一行再次打印 undefined

所以我发现我没有正确执行 map()。请问,我该如何解决这个问题?
这是对象:

main {
    "temp": 28.24,
    "feels_like": 31.43,
    "temp_min": 28.24,
    "temp_max": 28.24,
    "pressure": 1005,
    "humidity": 72,
    "sea_level": 1005,
    "grnd_level": 947
}

还有一件事,我打了两次useState(),可以吗?或者这也可以改进吗?谢谢!

你不需要为此使用 2 个状态,虽然 weather 是一个数组但 main 是一个对象

  • 使用一种状态:
const [weather, setWeather] = useState();
  • 将整个天气对象设置为您所在的州:
const fetchWeather = async () => {
  const data = await fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=Islamabad&units=metric&appid=" +
      APIKey
  );
  const weather = await data.json();
  setWeather(weather);
};
  • 因为 main 是一个对象,所以你可以这样渲染它:
<h2 id="temp">{weather?.main && weather.main.temp}C</h2>

{weather?.weather && weather.weather.map(weather => (
  <h2 key={weather.id} id="weather">{weather.main}</h2>
))}

此外,您的 API return 在初始渲染之后,因此 weather 将为空,可能会导致错误,因此在渲染之前检查 weather?.weather 是必要的。