在钩子中处理事件和可互换状态

Question

我有这个小的网络应用程序，是我在学习 React 时写的，当然它是基于 Class 的组件

随着我了解更多，我决定转向钩子，但我无法理解它，我认为基于 class 的组件更直接

所以在基于 Class 的组件中，我的配置如下

州：

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

那么对于前两种方法

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

在钩子中处理事件和可互换状态

handling event and interchangeable state in hooks

reactjs

react-hooks

use-effect

use-state