Reactjs 天气空气污染指数

我是个新手，所以我想我有一个简单的问题。我试图从API中获取天气描述，并根据它，尝试显示不同的图像。我编写了一个函数getForecast and 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，{useState}来自“React”；
从“axios”导入axios；
导入“/Products.css”；
从“./ProductItem”导入ProductItem；
从“./Weather”导入天气；
从“react bootstrap”导入{Container，Row，Col}；
功能产品（）{
const[imageTemp，setImage]=useState（'images/umbrane.svg'）；
常量getForecast=（）=>{
axios({
方法：“获取”，
网址：'http://api.openweathermap.org/data/2.5/weather?q=Kaunas&appid=7e6e14c967d752abbafb23a1f251b21c'
})
。然后（（响应）=>{
console.log（response.data.weather[0].description）；
if（response.data.weather[0]。description==“阴云”）{
setImage（'images/umber.svg'）；
}
else if（response.data.weather[0]。description==“清除”）{
setImage（'images/sunglases.svg'）；
}
否则{
setImage（'images/snowflake.svg'）；
}
})
.catch（（错误）=>{
console.log（错误）；
});
};
返回(
产品
今天提供
);
}
出口默认产品；

这是我的天气部分：

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;

从“React”导入React；
功能天气（道具）{
返回(
);
}
导出默认天气；

必须使用

useffect

调用此方法（

getForecast

）。。。将此部分添加到代码中

 useEffect(() => {
   getForecast();
  }, [imageTemp]);

---

我想任何地方都不需要

getForecast

---

如果您想知道如何在需要的时候调用函数，我建议您详细研究hook。

当您发出请求时，其中一个If是否有效？你测试过了吗？可能有控制台日志吗？谢谢你的快速回答，你的回答有效。不客气。谢谢你的回答。