Question

我是一名新手反应学习者，在这里尝试进行api调用以显示天气详细信息列表（对于测试用例，我试图获取“ app_max_temp”），但由于“无法读取未定义的地图属性（在SearchCity（SearchCity.js：29）“。我已经尝试过在邮递员中使用该网址，并且在提供响应数据时绝对可以正常工作。我下面有我的代码。我不知道哪里出了问题以及如何解决。任何帮助，将不胜感激。预先感谢。

import React,{useState} from 'react';

export default function SearchCity(){

    const[query,setQuery] = useState('');
    const[weatherResponse,setWeatherResponse] = useState([]);

    const searchCity = async (e) =>{
        e.preventDefault();
        const api_key ="YourApiKey";
        const url = `https://api.weatherbit.io/v2.0/forecast/daily?city=${query}&key=${api_key}`;
        try{
            const res = await fetch(url);
            const data = await res.json();
            console.log(data.results);
            setWeatherResponse(data.results);
        }
        catch(error){
            console.error(error);
        }

    }

    return(
        <>
            <form className="form" onSubmit={searchCity}>
                <label className="cityTitle" htmlFor="query">City Name : </label>
                <input type="text" value={query} name="query" onChange={(e)=>setQuery(e.target.value)} />
                <button className="btnSearch" type="submit">Search</button>
            </form>  
                {weatherResponse.map(res=>(
                <p>{res.app_max_temp}</p>
                )
                 )}
        </>
    )
}

Answer 1

Weatherbit 16 Day Forecast API Documentation
Weatherbit 16 Day Forecast Swagger UI

API在属性数据中返回这些值，而不是结果：

your session id is: {{ id }}
your session email is: {{ email }}
your session symptom is: {{ description }}

<form action="" method="post">
    <input type="text" name="text" class="form-control" placeholder="description">
    <button class="btn btn-primary">Add</button>
</form>

确保您具有正确的API密钥（当然不要在此处发布）。

无法读取地图未定义反应的属性

1 个答案: