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

by admin Posted on

我有一个我在学习react时编写的小型web应用程序，当然它是基于类的组件

随着我学到了更多，我决定转向钩子，但我无法理解它，我认为基于类的组件更简单

因此，在基于类的组件中，我的配置如下

状态：

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

但它看起来我真的很远，它不是控制台记录事件的变化

转载请注明出处:http://www.wje4.com/article/20230526/2495799.html