我正在使用 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 密钥。 现在在 return() 之前的 console.log() 中>
它会在控制台中显示温度。我注释掉了 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() 两次，这样可以吗？或者也可以改进吗？谢谢！