Как правильно использовать хук useState?

Question

[Gumadan]

День добрый. Я ток начал изучать react и решил сделать простой сайт с запросом API. После того как все сделал мой товарищ сказал, что сейчас все делают через функции и дал мне задание переписать. Столкнулся с проблемой не понимаю как использовать useState в моей данной ситуации.

import React from "react";
import Info from "./components/info";
import Form from "./components/form";
import Weather from "./components/weather";

const API_KEY = "8d5a4991e514824fa47a9a4ecdf6302f";

function App() {

    const state = {
        temp: undefined,
        city: undefined,
        country: undefined,
        pressure: undefined,
        sunset: undefined,
        error: undefined
    }

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

     if(city) {
         const api_url = await
         fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);
         const data = await api_url.json();

         const sunset = data.sys.sunset;
         const date = new Date();
         date.setTime(sunset);
         const sunset_date = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

         this.setState({
             temp: data.main.temp,
             city: data.name,
             country: data.sys.country,
             pressure: data.main.pressure,
             sunset: sunset_date,
             error: undefined
         });
     } else {
       this.setState({
           temp: undefined,
           city: undefined,
           country: undefined,
           pressure: undefined,
           sunset: undefined,
           error: "Введите название города"
       });
     }
 }

        return(
            <div className="wrapper">
                <div className="main">
                    <div className="container">
                        <div className="row">
                            <div className="col-sm-5 info">
                                <Info />
                            </div>
                                <div className="col-sm-7 form">
                                    <Form weatherMethod={gettingWeather} />
                                    <Weather
                                        temp={state.temp}
                                        city={state.city}
                                        country={state.country}
                                        pressure={state.pressure}
                                        sunset={state.sunset}
                                        error={state.error}
                                    />
                                </div>
                        </div>
                    </div>
                </div>
            </div>

        );
}

export default App;

Comments

[Mikhail Osher]

Сначала базу JS выучите, а потом прыгайте на Реакты всякие.

[Just Me]

прекрасная статья по асинхронному получению сторонних данных с помощью хуков https://www.robinwieruch.de/react-hooks-fetch-data

Answer 1

[Тигран Абрамян]

не понимаю как преобразовать this.State в useState.

читайте, поймете

Comments

[Gumadan]

у меня state объявлен просто переменной. а я должен использовать хук useState. и не могу понять как это сделать

[Тигран Абрамян]

Gumadan, я вам ссылку на официальную документацию дал где все разжевано, здесь никто за вас код не перепишет когда ответ есть на документации

[Gumadan]

Тигран Абрамян, да спасибо, уже изучаю