React中setUser后打印enteredUser为空，求代码错误排查

React 的 setState（包括你用的函数式更新 setUser）是异步操作，不会立刻更新组件状态。你在调用 setUser 后马上打印 enteredUser，此时状态还没完成更新，拿到的仍然是更新前的旧值（也就是初始的空数组）。

有两种方式可以正确查看更新后的状态：

• 用 useEffect 监听状态变化
  当 enteredUser 发生改变时，useEffect 会自动触发，这时就能拿到最新的状态值：

  import { useState, useEffect } from 'react';
  
  const [enteredUser, setUser] = useState([]);
  
  useEffect(() => {
    console.log("更新后的用户列表: ", enteredUser);
  }, [enteredUser]); // 依赖项设为enteredUser，状态变化时执行回调
  
  const addUserHandler = (uNmae, uAge) => {
    setUser((prevUserList) => {
      console.log(uNmae);
      return [...prevUserList, { name: uNmae, age: uAge }];
    });
  };
  

• 在函数式更新内部直接查看新状态
  如果只是想确认新生成的数组内容，可以在 setUser 的回调里先创建新数组并打印：

  const addUserHandler = (uNmae, uAge) => {
    setUser((prevUserList) => {
      const newUserList = [...prevUserList, { name: uNmae, age: uAge }];
      console.log("新的用户列表: ", newUserList);
      return newUserList;
    });
  };
  

React 设计异步更新状态是为了优化性能，避免频繁触发组件重渲染。永远不要依赖 setState 调用后的状态值做后续逻辑，要么用 useEffect 监听状态变化，要么在函数式更新的回调里处理新状态。

内容的提问来源于stack exchange，提问作者naruto8