为什么在获取并等待数据后，userData 仍然是一个空数组？

Question

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

const getData = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await res.json();
    setData(data);
    console.log(userData);
  };
 

  return (
    <>
      <button onClick={getData}>get data</button>
      
      <div>
        {userData?.map((user) => {
          return (
            <p key={user.id}>
              {user.name} {user.email}
            </p>
          );
        })}
       
      </div>
    </>
  );
}

export default App;

我尝试获取数据，然后将其存储在我的状态变量中

userData

。在控制台记录

userData

时，它应该显示据我所知获取的数据。我知道

await

会停止进一步执行，直到 Fetch Api 返回的承诺得到解决或拒绝。在这种情况下，应使用

userData

更新

setData

。但为什么即使在等待结果之后，

userData

在记录时仍然是一个空数组？

Answer 1

setState 将在下次重新渲染时更新变量。

试试这个：

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

const getData = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await res.json();
    setData(data);
    
  };
  console.log(userData);

  return (
    <>
      <button onClick={getData}>get data</button>
      
      <div>
        {userData?.map((user) => {
          return (
            <p key={user.id}>
              {user.name} {user.email}
            </p>
          );
        })}
       
      </div>
    </>
  );
}

export default App;