时间戳

首页 > 解决方案 > 无法读取地图未定义反应的属性

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

问题描述

我是一个新手反应学习者，在这里尝试进行 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>
                )
                 )}
        </>
    )
}

标签： javascriptreactjs

解决方案

Weatherbit 16 天预报 API 文档
Weatherbit 16 天预报 Swagger UI

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

        console.log(data.data);
        setWeatherResponse(data.data);

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

推荐阅读