React Hooks 中 useState 的异步问题

Question

当我运行以下代码时，出现了一个奇怪的问题：

import {useState, useEffect} from 'react'

function App() {
  const [data, setData] = useState([]);

  useEffect(()=>{
    {console.log("useEffect start")}                     // Step 1 after useEffect start
    const getApiData = async () => {
      console.log("async function start")                // Step 2
      const apiData = await fetch("https://api.chucknorris.io/jokes/random").then(res=>res.json());
      console.log("get API data")                        // Step 3
      setData(data.concat(apiData));
      console.log("after setData",data)}                 // Step 6
    getApiData();
  },[])
  console.log("outside useEffect",data);                 // Step 4

  return (<>
     <li>{data.map(i => <li>{i.value}</li>)}</li>
     {console.log("inside return")}                      // Step 5
  </>)}

export default App

以下是控制台的序列结果：

outside useEffect []
inside return
useEffect start
async function start
get API data
outside useEffect [{…}]  // Since useState(setData) is asynchronous, 
                         // why this step can get the return data value before setData is completed？
inside return
after setData []

我不明白的是，如果useState(setData)是异步的，为什么我可以在步骤4中得到data的返回值？既然我在步骤4中就可以得到data的返回值，那么说明useState(setData)在步骤4之前就已经完成了。如果是这样，为什么步骤6要在步骤4之后呢？如果 useState(setData) 已经完成，那么根据代码行的顺序，下一次执行应该是

console.log("after setData", data)

。我在这里错过了什么吗？

Answer 1

setData 更新所有 List 然后他又做了一次，这样 n 就可以再次看到 useEffect [{…}] 之外的内容