使用useEffect、useState与axios时，回调中无法修改state问题求助

Hey there, let's break down what's going on here and fix your issue step by step.

核心问题：React状态更新是异步的 #

你遇到的最关键问题是——React的useState更新是异步操作。当你调用setUser(user.data.info)后，React并不会立刻修改user变量的取值，所以紧接着的console.log(user)打印的还是更新前的空对象，这是React的正常机制，不是代码bug。

另外你的代码里还有一个语法错误：变量名user-token是非法的，JavaScript不允许变量名包含减号，得改成userToken或user_token这类合法命名。

修正后的完整代码 #

function User() {
  const [user, setUser] = useState({});

  useEffect(() => {
    // 修正变量命名
    const userToken = window.localStorage.getItem('user-token');
    
    const getUser = async () => {
      if (userToken !== null) {
        try {
          // 用response存请求结果，避免和状态变量user重名混淆
          const response = await axios.get('http://localhost:5000/api/index/info');
          setUser(response.data.info);
          // 这里打印接口返回的原始数据，是准确的
          console.log('接口返回的用户数据:', response.data.info);
        } catch (error) {
          // 建议增加错误处理，避免请求失败无反馈
          console.error('获取用户信息失败:', error);
        }
      }
    };

    getUser();
  }, []); // 空依赖数组表示仅在组件挂载时执行一次

  // 在这里打印，每次组件重新渲染都会输出最新的user状态
  console.log('当前用户状态:', user);

  return (
    <div>
      {user.name ? `姓名：${user.name}` : '加载中...'}
      {user.age ? `年龄：${user.age}` : ''}
    </div>
  );
}

如何正确查看更新后的状态？ #

如果想确认user状态是否真的更新了，有两种可靠方式：

• 在组件渲染代码外直接打印user（如上面代码所示），组件每次因状态更新重新渲染时，都会输出最新的状态值。
• 用额外的useEffect监听user的变化：

  useEffect(() => {
    console.log('user状态已更新:', user);
  }, [user]); // 依赖数组加入user，状态变化时自动执行
  

内容的提问来源于stack exchange，提问作者Đàm Quang Hạnh