обработка события и взаимозаменяемости в хуках

Question

У меня есть это маленькое веб-приложение, которое я написал, когда учился, реагирую, конечно, оно в компонентах на основе классов

Когда я узнал больше, я решил перейти к крючкам, но не могу получить я думаю об этом, но я думаю, что компоненты на основе классов были более простыми

Поэтому в компонентах на основе классов у меня была следующая конфигурация

Состояние:

this.state = { countryData: {updated:0,cases:0, todayCases:0, deaths:0, todayDeaths:0, recovered:0, active:0}}

Установка начального состояния:

async getData(){
        const resApi = await Axios.get('https://corona.lmao.ninja/v2/all')
        this.setState({ countryData : resApi.data })
}

componentDidMount(){ this.getData() }

А затем у меня есть выпадающее меню опций, которое при изменении меняет данные страны

async getCountryData(event){
        if (!event) return this.getData()
        const res = await Axios.get(`https://corona.lmao.ninja/v2/countries/${event.value}`)
        this.setState({ countryData : res.data })
}

Итак, теперь я попытался сделать то же самое в хуках, которые я начал с

const [countryData, setcountryData] = useState({updated:0,cases:0, todayCases:0, deaths:0, todayDeaths:0, recovered:0, active:0})

Затем для предыдущих 2 методов

    const useChoosenCountry = (event) => {
        useEffect(() => {
            async function getdata(event){
                if (!event) {
                    const resApi = await Axios.get('https://corona.lmao.ninja/v2/all')
                    setcountryData(resApi.data)
                }
                    const res = await Axios.get(`https://corona.lmao.ninja/v2/countries/${event.value}`);
                    setcountryData(res.data);   
                } 
                console.log(event)
            getdata()
        },[event])
    }

Но похоже, что я действительно далеко это не консоль, регистрирующая событие при изменении

Answer 1

componentDidMount можно заменить на useEffect(function, []):

useEffect(() => {
    getData();
}, [])


const getData = async () => {
    const res = await Axios.get('https://corona.lmao.ninja/v2/all')
    setcountryData(res.data)
}

const getCountryData = async (event) => {
    if (!event) return this.getData()
    const res = await Axios.get(`https://corona.lmao.ninja/v2/countries/${event.value}`)
    setcountryData(res.data)
}