使用React Hooks和OpenWeatherMap API获取5天天气预报的步骤如下:
useEffect(() => {
const fetchForecastData = async () => {
try {
const response = await axios.get('https://api.openweathermap.org/data/2.5/forecast?q={城市名}&appid={你的API密钥}');
setForecastData(response.data);
} catch (error) {
console.error('Error fetching weather forecast:', error);
}
};
fetchForecastData();
}, []);
确保替换URL中的{城市名}和{你的API密钥}为实际的数值。可以在OpenWeatherMap网站上注册并获取API密钥。
return (
<div>
{forecastData && forecastData.list.map((forecast, index) => (
<div key={index}>
<h2>{forecast.dt_txt}</h2>
<p>Temperature: {forecast.main.temp}</p>
<p>Weather: {forecast.weather[0].description}</p>
</div>
))}
</div>
);
确保根据API响应的数据结构调整键的名称,例如forecast.dt_txt、forecast.main.temp和forecast.weather[0].description。
以上步骤涵盖了使用React Hooks和OpenWeatherMap API获取5天天气预报的完整过程。请记得替换实际的API密钥和城市名,并根据需要自定义页面布局和样式。
领取专属 10元无门槛券
手把手带您无忧上云