Question

我正在 useEffect 钩子中调用 API 并尝试更新我的状态 covidData 但即使在调用 setData 函数后我的数组仍然为空：

const [covidData, setData] = useState([]);

useEffect(() => {
        async function getGlobalData() {

            let response = await fetch('https://api.covid19api.com/summary');
            let jsonResponse = await response.json();
            const globalData = jsonResponse.Global;

            //setting covidData
            setData([...covidData, {recovered: globalData.TotalRecovered}])
            console.log(covidData); //covidData is empty
        }

        getGlobalData()
    }, [])

我做错了什么？

Answer 1

你的代码是正确的，状态是异步更新的，你的console.log在你setState之后不会显示你的状态是正常的。

Answer 2

这就是 react 的工作原理，当你改变某物的状态时，react 会创建虚拟 dom 的新实例。

因此，当您更改 covidData 的状态时，您设置的值将在新实例中，并且 console.log 仍在该旧实例中，因此它会记录旧值，该值在您使用 useState 时设置为空。

尝试使用按钮 onClick 事件记录日志，您将看到您的数据，或者您可以使用 React Dev Tools

您也可以将代码重构为

useEffect(async () => {

        let response = await fetch('https://api.covid19api.com/summary');
        let jsonResponse = await response.json();
        const globalData = jsonResponse.Global;

            //setting covidData
            setData([...covidData, {recovered: globalData.TotalRecovered}])
           
    }, [])

更多关于虚拟 dom

使用 useState 更新数组

2 个答案: