使用 useState 更新数组

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

React Docs
What is virtual DOM

使用 useState 更新数组

Update array using useState

arrays

reactjs

use-state