使用 React 天气 Api

Question

我对 React 很陌生，所以我有一个简单的问题。我正在尝试从 API 获取天气描述，并据此显示不同的图像。我写了一个函数 getForecast 和 response.data.weather[0].description 变成了正确的值。因此，据此，我将 'image' 分配给不同的 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;

Answer 1

您必须使用 useEffect 来调用此方法(getForecast)...将此部分添加到您的代码中

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

Answer 2

我认为没有任何地方需要 getForecast。

如果您想知道如何在您想要的时候调用该函数，我建议您详细查看 useEffect 钩子。

使用 React 天气 Api

Weather Api with React

weather-api

reactjs