reactjs - 带有 React 的天气 API
问题描述
我对 React 很陌生,所以我想有一个简单的问题。我正在尝试从 API 中获取天气描述,并据此尝试显示不同的图像。我写了一个函数 getForecast 和 response.data.weather[0].description 变成正确的值。因此,据此,我将“图像”分配给不同的 SVG,但不会右转。
import React, { useState } from 'react';
import axios from 'axios';
import './Products.css';
import ProductItem from './ProductItem';
import Weather from './Weather';
import { Container, Row, Col } from 'react-bootstrap';
function Products() {
const [imageTemp, setImage] = useState('images/umbrella.svg');
const getForecast = () => {
axios({
method: "GET",
url: 'http://api.openweathermap.org/data/2.5/weather?q=Kaunas&appid=7e6e14c967d752abbafb23a1f251b21c'
})
.then((response) => {
console.log(response.data.weather[0].description);
if (response.data.weather[0].description === "overcast clouds") {
setImage('images/umbrella.svg');
}
else if (response.data.weather[0].description === "clear") {
setImage('images/sunglasses.svg');
}
else {
setImage('images/snowflake.svg');
}
})
.catch((error) => {
console.log(error);
});
};
return (
<div className='products'>
<Container className="products-container">
<h2 className="products__title">Products</h2>
<h6 className="products__subtitle">Offers Today</h6>
<Row>
<Col xs="12" md="6" lg="6">
<Weather
src={imageTemp}
path='/'
/>
</Col>
<Col xs="12" md="6" lg="6">
<ProductItem
src='images/img-2.jpg'
text='The Best Coffee'
path='/'
/>
<ProductItem
src='images/img-3.jpg'
text='Top 100 Books'
path='/'
/>
</Col>
</Row>
</Container>
</div>
);
}
export default Products;
这是我的天气组件:
import React from 'react';
function Weather(props) {
return (
<div className='banner__item'>
<figure className='banner__item__pic-wrap'>
<img
className='banner__item__img'
src={props.src}
/>
</figure>
</div>
);
}
export default Weather;
解决方案
您必须使用useEffect
来调用此方法(getForecast
)...将此部分添加到您的代码中
useEffect(() => {
getForecast();
}, [imageTemp]);
推荐阅读
- javascript - 了解 Javascript 如何全局解析变量
- google-app-engine - 从外部 URL 加载 Freemarker 模板
- c++ - CGAL:与半边相关的刻面的输出 ID
- javascript - React-select:背景颜色不会在 wordWrap 上填满全宽:“scroll”
- node.js - Mongoose 按参考 ID 查找
- git - 当存储库与共享库相同时,Jenkins 不会检查正确的版本
- qt - 如何在 QML 中制作 3D 文本
- java - 如何从 cURL 命令或 Internet 浏览器通过 HTTP/1.1 调用 gRPC 服务器
- android - 无法解析符号登录 Android Studio 3.4.1
- python - TF keras API 与 TF 数据集问题 - steps_per_epoch 参数问题