Question

我想将数据从accuWeather API传递到我的React应用项目中，如何获取API array中的特定数据？
我想使用该url显示5天的天气： http://dataservice.accuweather.com/indices/v1/daily/5day/{} 在大括号内，我想输入城市的唯一ID（伦敦，罗马等），但我可能希望它是动态的，因为用户应在输入中输入城市名称，并在其中输入5天天气的结果市。我首先尝试按名称获取城市数据，但它部分起作用，当我使用console.log观看控制台时传递了数据，但是当我尝试在ui中显示数据时却没有能够编译。

import React, { useState } from 'react';
import axios from 'axios';
 
function App() {

    const [data, setData] = useState({ hits: [] });

    const key = 'aH6QxN75A...' //showing the key partially

    const getCity = async(city)=>{
    const base = 'http://dataservice.accuweather.com/locations/v1/cities/search'  
    const query = `?apikey=${key}&q=${city}`

    const response = await fetch(base +query)
    const data = await response.json();

    console.log(data)

    setData(response.data);
  };

  getCity('london');

我认为问题实际上出在return上，我无法正确访问我的api数据……无论如何，我试图使用map function返回并显示数据，看起来像这样，无法正常工作。

  return (
    <div>
          <ul>
      {data.hits.map(item => (
        <li key={item.data.key}>
           <a href={item.data.version}>{item.data.type}</a>
        </li>
       ))}
     </ul>
    </div>
)
}
 
export default App;

我希望我更清楚一些，但是我要尽力而为。

我很乐意为您提供帮助...谢谢大家

From here i toke a key of city data weather

Returns 5 days of daily index data for all indices, by location key.

API Flow Diagram

使用react钩子从accuWeather API传递数据

0 个答案: