React JS 中的天气 API 应用程序

Question

我想用 React JS 创建一个 Weather API，所以当我输入城市名称时，会出现当前温度、当天最高最低温度，例如： 如果没有找到城市，那么它应该显示没有找到城市。 我无法从 API 获取数据 我想用 React JS 创建一个 Weather API，所以当我输入城市名称时，当前温度、当天最高最低温度会出现，例如： 如果没有找到城市，那么它应该显示没有找到城市。 我无法从 API 获取数据

import React, {useState} from "react";

const TempApp = () =>
{

    const[ city, setCity] = useState(null);
    const[ search, setSearch] = useState("");
 const fetchApi = async() =>
        {
            const url =`http://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=4ebb9418ca605fa1931880e565ec065c`;
            const response = await fetch(url);
            const resJson = await response.json();
            setCity(resJson.main);
        }
   
    return (
        <div className="box">
            <div className="InputData">
                <input 
                type="search"
                className="InputField"
                onChange = { (event) => {
                    setSearch(event.target.value)

                }} />
            {
                !city?
                (   <div>
                    <h3><b>No Data Found</b></h3>
                    <div id="clouds">
                <div class="cloud x1"></div>
                <div class="cloud x2"></div>
                <div class="cloud x3"></div>
                <div class="cloud x4"></div>
                <div class="cloud x5"></div>
            </div>
            </div>
                ) :
                (
                    <div>
                    <div className="info">
                    <h2 className="location">
                    <i class="fas fa-street-view"></i>{search}
                    </h2>
                    <h1 className="temp">
                    {city.temp}
                    </h1>
                    <h3 className="tempmin_max">{city.temp_min} Cel| {city.temp_max}Cel</h3>
                </div>
                <div className="wave- one"></div>
                
                <div className="wave- two"></div>
                
                <div className="wave- three"></div>
                
                <div id="clouds">
                <div class="cloud x1"></div>
                <div class="cloud x2"></div>
                <div class="cloud x3"></div>
                <div class="cloud x4"></div>
                <div class="cloud x5"></div>
            </div>
            </div> 

                )
            }

            </div> 
        </div>
    )
}
 
export default TempApp;

Answer 1

解决方案可通过以下链接获得： https://github.com/mareyam/Weather-Api-Tracker-in-React-JS/blob/main/TempApp.jsx 应该做的就是：

 useEffect(() => {
        const fetchApi = async() =>
        {
            const url =`http://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=4ebb9418ca605fa1931880e565ec065c`;
            const response = await fetch(url);
            const resJson = await response.json();
            setCity(resJson.main);
        }
        fetchApi();
    },[search])