React中useState从Axios响应更新延迟问题求助

问题根源 #

1. React的useState更新是异步批量处理的，调用setUsername后不会立即修改countUsername的当前值，状态更新会在组件下一次渲染时生效。
2. checkUser中的Axios请求是异步操作，saveUser里调用checkUser后会直接执行console.log，此时请求还未完成，状态自然没有更新。

解决办法 #

方法一：异步等待请求完成

修改checkUser让它返回Promise，然后在saveUser中用await等待请求和状态更新完成：

const checkUser = () => {
  return RestaurantDataService.checkUsername(user.username)
    .then(response => {
      const newCount = response.data.length;
      setUsername(newCount);
      return newCount;
    })
    .catch(e => {
      console.log(e);
      throw e;
    });
};

const saveUser = async () => {
  await checkUser();
  console.log(countUsername); // 此时状态已更新
};

方法二：监听状态变化执行后续逻辑

如果你的核心需求是在countUsername更新后执行操作（比如判断是否允许保存用户），可以用useEffect监听状态变化：

import { useEffect } from 'react';

// ...

useEffect(() => {
  // 当countUsername变化时触发
  if (countUsername !== 0) {
    console.log(countUsername);
    // 在这里编写基于最新状态的逻辑，比如判断用户名是否存在并执行保存
  }
}, [countUsername]);

const saveUser = () => {
  checkUser();
};

补充说明 #

React状态更新后会触发组件重新渲染，新的状态值只会在下一次渲染的组件中可用。所以不要在调用setState后立即同步依赖这个值，必须通过异步等待或状态监听的方式处理后续逻辑。

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