Question

我有一个我在学习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])
    }

但是看起来我真的很远，不是控制台记录更改事件

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

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

1 个答案: