如何在reactjs中将类组件转换为功能组件?

我有一个应用程序。js文件,它是用类组件编写的,但我想把它改成函数组件。从那时起,我就习惯了分类,也不熟悉功能组件。非常感谢您的任何建议。。。提前谢谢

下面是我的应用程序。js文件

import React from 'react';
import './App.css';
import Weather from './components/Weather';
import Form from './components/Form';
import Title from './components/Title';
import ForecastDays from './components/forecast';
import haze from './video/Haze.mp4';
import Spinner from './components/Spinner'

class App extends React.Component  { 
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      lat: '',
      lon: '',
      city: '',
      country: '',
      humidity: '',
      temperature: '',
      wind: '',
      description: '',
      error: ''
    }
  }

  componentDidMount = async () => {
    const {city, country} = this.state;

    // weatherbit
    const api_call3 = await fetch(`https://api.weatherbit.io/v2.0/current?` + 
    `?city=${city},${country}&days=5&key=${API_KEY3}`)
    const data3 = await api_call3.json();
    console.log('DATA I GET', data4)

    // weatherbit
    const api_call3 = await fetch(`https://api.weatherbit.io/v2.0/forecast/daily` + 
    `?city=${city},${country}&days=5&key=${API_KEY3}`)
    const data3 = await api_call3.json(); 

    this.setState({
        temperature: data4.data[0].temp,
        city: data4.data[0].city_name,
        country: data4.data[0].country_code,
        humidity: data4.data[0].rh,
        wind: data4.data[0].wind_spd,
        description: data4.data[0].weather.description,
        error: "",
        forecastdays: data3.data,
        isLoading: false
      })


  } 

  getWeather = async (e) => {
    e.preventDefault();
    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;

    // 1. weatherbit
    const api_call4 = await fetch(`https://api.weatherbit.io/v2.0/current?` + 
    `city=${city},${country}&key=${API_KEY3}`);
    const data4 = await api_call4.json();

    // 2. weatherbit
    const api_call3 = await fetch(`https://api.weatherbit.io/v2.0/forecast/daily` + 
    `?city=${city},${country}&days=5&key=${API_KEY3}`)
    const data3 = await api_call3.json();

    if(city && country) {
      this.setState({
        temperature: data4.data[0].temp,
        city: data4.data[0].city_name,
        country: data4.data[0].country_code,
        humidity: data4.data[0].rh,
        wind: data4.data[0].wind_spd,
        description: data4.data[0].weather.description,
        error: "",
        forecastdays: data3.data,
        isLoading: false
      })
    } else {
      this.setState({
        temperature: undefined,
        city: undefined,
        country: undefined,
        humidity: undefined,
        description: undefined,
        error: "Please Enter Some Value"
      })
    }
  }

  render() {
    const { forecastdays, isLoading, lat,lon,city,country,humidity,temperature,wind,
    description} = this.state;

    return (
      <div className="container">
        <div className="row">

            <div className="col-sm-4 form-container">
              <Title/>
              <Form getWeather={this.getWeather}/>
            </div>
          {isLoading && <Spinner/>}
          {!isLoading && (
            <React.Fragment>
         <div className="col-sm-8 image-container">

         {/* Weather Card */}
         <div className="background">
         <div className="container">

             <div id="card" className="weather">

                 <div className="details">
                     {/* Weather Details */}
                      <div className="content" style={{width: '125px'}}>
                       <Weather
                         temperature={this.state.temperature}
                         city={this.state.city}
                         country={this.state.country}
                         humidity={this.state.humidity}
                         description={this.state.description}
                         wind={this.state.wind}
                         /> 
                      </div>

                     {/* Forecast Cards */}

                     <div className="content" style={{width: '210px'}}>
                       <ForecastDays forecastdays={forecastdays}/> 
                      </div>
                     {/* Forecast Cards Ends*/  }          
                 </div> 

             </div>
         </div>
         </div>
         {/* Video Background Starts */}
         <div>
         { this.state.description == 'Haze' ? <video autoPlay muted loop id="myVideo">
         <source src={haze} type="video/mp4"/>
       </video>: ''}
         </div>
         {/* Video Background Ends */}
         </div>
         {/* Weather Card Ends */}
         </React.Fragment>
          )}
        </div>
      </div>
    );
  }
}

export default App

我想把它转换成功能组件。。。请帮忙