React -API调用设置Mutliple状态变量(更好的替代方案)



我正在学习反应,在此过程中,我试图在单个useEffect钩中设置多个状态变量。我只是想知道,我的方法是否是设置多个状态变量的正确方法。如果有更好的方法,请查看和建议。

    import React, { useState, useEffect } from 'react';
    import axios from 'axios';
    const App = () => {
        const reqUrl = 'https://hn.algolia.com/api/v1/search?query=redux'
        const initialStateValue = [{ id: 0, value: ' --- Select A State --- ' }];
        const [initialJsonData, setInitialJsonData] = useState({ hits: [] });
        const [tagTypes, setTagTypes] = useState([]);
        const [stateSelected, setStateSelected] = useState(initialStateValue[0].value);

        useEffect(() => {
            axios(reqUrl).then(result => {
                const tagTypeLocal = { ...result.data.hits[0] }
                setTagTypes(tagTypeLocal._tags) --> setting the state variable tagTypes
                console.log(tagTypeLocal._tags)
                setInitialJsonData(result.data) --> setting the state variable initialJsonData
            })
        }, [])

是的,这是可接受的实现,用于使用useEffect Hook更新多个状态项目。

并将其中一个评论介绍给您的问题,使用多个状态变量可能会在不同时间进行更新,因为它们可以按照您链接的代码框的建议进行更新。实际上,在React文档中建议采用这种方法。

最新更新