Как преобразовать компонент класса в функциональный компонент вactjs?

Question

У меня есть файл 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

Я хочу преобразовать его в функциональный компонент ... Пожалуйста, помогите

Answer 1

      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;
      };

Это может помочь вам начать

Answer 2

Прежде всего, я собираюсь вызвать какое-то крайне бесполезное поведение от @marzelin. Вам должно быть стыдно, совершенно не нужно педантично относиться к тому, что его называют компонентом function против functional. Если вы используете Google как «функциональный компонент», вы в буквальном смысле получите результаты того, что люди называют его «функциональными компонентами», потому что это означает то же самое, разницы нет, а вы просто имеете в виду.

Во-вторых,Чтобы ответить на ваш вопрос, и без лишних слов, вы действительно должны прочитать документы . Подводя итог, ваша текущая реализация, которую вы имеете, не может быть преобразована в компонент функции (al) в первую очередь потому, что она имеет состояние. Почему? Компонент function (al) - это именно то, что это просто функция, и функции не могут иметь состояния, поскольку это вещь React, а не общая вещь Javascript. Это также причина, почему компоненты функции (al) называются компонентами без состояния . Основное использование этих компонентов должно быть чистым и возвращать одинаковые выходные данные при одинаковых входных данных.

Answer 3

Я не буду выполнять вашу работу, но я рад, что могу объяснить вам разницу между состоянием с состоянием (класс) и лицом без состояния (функция / функционал / как вы хотите это называть, но без состояния).

Компонент с состоянием имеет состояние и также используется как контейнер. Например, у вас может быть PageContainer, где вы выполняете ajax-вызов в componentDidMount для извлечения информации.

Компонент без сохранения состояния является просто компонентом пользовательского интерфейса, не имеет побочных эффектов. Когда-либо. Так, например, у вас будет компонент <ShowInfo data={this.state.data} />, который будет отображаться в вашем компоненте с состоянием. Эта showinfo будет компонентом без сохранения состояния.

Теперь вы можете использовать хуки, которые представляют собой сочетание обоих: они включают состояние в функциональные компоненты. Вы можете прочитать много документации в реактивных документах.