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

我有一个App.js文件，它是在类组件中编写的，但我想将其更改为功能组件。从那时起，我就习惯了分类，也不熟悉功能组件。非常感谢您的任何建议。。。提前谢谢

下面是我的App.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

从“React”导入React；
导入“/App.css”；
从“./组件/天气”导入天气；
从“./components/Form”导入表单；
从“./components/Title”导入标题；
从“./components/forecast”导入预测天数；
从“./video/haze.mp4”导入haze；
从“./components/Spinner”导入微调器
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
拉丁语：''，
朗：“，
城市：''，
国家：“，
湿度：''，
温度：''，
风：''，
说明：“”，
错误：“”
}
}
componentDidMount=async（）=>{
const{city，country}=本州；
//威瑟比特
const api_call3=等待获取(`https://api.weatherbit.io/v2.0/current?` + 
`城市=${city}，${country}&days=5&key=${API\u KEY3}`）
const data3=wait api_call3.json（）；
log（'DATA I GET'，data4）
//威瑟比特
const api_call3=等待获取(`https://api.weatherbit.io/v2.0/forecast/daily` + 
`城市=${city}，${country}&days=5&key=${API\u KEY3}`）
const data3=wait api_call3.json（）；
这是我的国家({
温度：数据4。数据[0]。温度，
城市：数据4。数据[0]。城市名称，
国家/地区：data4.数据[0]。国家/地区代码，
湿度：数据4。数据[0]。相对湿度，
风：数据4。数据[0]。风电涌，
description:data4.data[0].weather.description、，
错误：“”，
预报日：data3.data，
孤岛加载：false
})
} 
getWeather=async（e）=>{
e、 预防默认值（）；
const city=e.target.elements.city.value；
const country=e.target.elements.country.value；
//1.防风雨钻头
const api_call4=等待获取(`https://api.weatherbit.io/v2.0/current?` + 
`城市=${city}，${country}&key=${API_KEY3}`）；
const data4=wait api_call4.json（）；
//2.防风雨钻头
const api_call3=等待获取(`https://api.weatherbit.io/v2.0/forecast/daily` + 
`城市=${city}，${country}&days=5&key=${API\u KEY3}`）
const data3=wait api_call3.json（）；
if（城市和国家）{
这是我的国家({
温度：数据4。数据[0]。温度，
城市：数据4。数据[0]。城市名称，
国家/地区：data4.数据[0]。国家/地区代码，
湿度：数据4。数据[0]。相对湿度，
风：数据4。数据[0]。风电涌，
description:data4.data[0].weather.description、，
错误：“”，
预报日：data3.data，
孤岛加载：false
})
}否则{
这是我的国家({
温度：未定义，
城市：未定义，
国家：未定义，
湿度：未定义，
说明：未定义，
错误：“请输入一些值”
})
}
}
render（）{
天气预报、岛载、纬度、经度、城市、国家、湿度、温度、风、，
description}=this.state；
返回(
{isLoading&&}
{！正在加载&&(
{/*天气预报卡*/}
{/*天气详情*/}
{/*预测卡*/}
{/*预测卡结束*/}
{/*视频背景启动*/}
{this.state.description=='Haze'？
: ''}
{/*视频背景结束*/}
{/*天气预报卡结束*/}
)}
);
}
}
导出默认应用程序

---

我想把它转换成功能组件。。。请帮助我，我不能胜任你的工作，但我很高兴我能向你解释有状态（类）和无状态（函数/函数/你想叫它什么都行，但没有状态）之间的区别

有状态组件有一个状态，也可以像容器一样使用。例如，您可以有一个PageContainer，在其中在componentDidMount中进行ajax调用以检索信息

无状态组件只是一个UI组件，没有任何副作用。曾经例如，您将有一个组件

，它将在有状态组件中呈现。该showinfo将是一个无状态组件

---

现在，您可以使用两者混合的钩子：它们在功能组件中包含状态。您可以在react docs中阅读大量文档。

首先，我将从@marzelin中指出一些极其无用的行为。你应该感到惭愧，完全没有必要对它被称为

函数

vs

函数

组件而装腔作势。如果你在谷歌上搜索“功能组件”，你会得到人们称之为“功能组件”的结果，因为它的意思是一样的，没有区别，你只是小气而已

第二，为了回答你的问题，并且不需要额外的唠叨，你应该真正地阅读文章。总而言之，您当前的实现无法转换为函数（al）组件，主要是因为它具有状态。为什么？一个函数（al）组件就是这样，它只是一个函数，函数不能有状态，因为它是一个反应的东西，而不是一个整体Javascript的东西。这也是函数（al）组件被称为无状态组件的原因。这些组件的主要用途是保持纯净，并在给定相同输入的情况下返回相同的输出

      const App = () => {
        const [isLoading, setIsLoading] = useState(true);
        const [weather, setWeather] = useState();
        const [error, setError] = useState();
        const [city, setCity] = useState();
        const [country, setCountry] = useState();

        useEffect(async () => {
          const result = await axios(
            "https://hn.algolia.com/api/v1/search?query=redux"
          );
          setData(result.data);

          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();
          setWeather({
            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,
            forecastdays: data3.data
          });
          setIsLoading(false);
        });
        return null;
      };

---

这可能有助于您入门

对于初学者来说，这是

功能组件

而不是

功能组件

我建议阅读offi