React中useState与Axios校验用户名存在性延迟问题求助

问题原因 #

React的useState状态更新是异步调度的，调用setCheckUserExist后，checkUserExist不会立即更新为新值。你的addUser函数中，调用checkUserIfExist后立刻判断checkUserExist，此时用的还是旧的状态值，导致第一次点击无法触发预期弹窗，第二次点击时才会用上一次异步更新后的状态。

解决方案 #

方案一：让校验函数直接返回结果（推荐，无需依赖state做即时判断） #

修改校验函数，让它返回用户名是否存在的布尔值，在addUser中等待校验完成后直接判断：

const checkUserIfExist = async (username) => {
  const result = await axios.get(`http://localhost:3000/users?username=${username}`);
  const isExist = result.data.length > 0;
  console.log(result.data.length); // 查看返回数据量
  return isExist;
};

const addUser = async (username, password) => {
  const isUsernameExist = await checkUserIfExist(username);
  
  if (isUsernameExist) {
    alert("You should change your username");
  } else {
    console.log("Successful");
    // 这里执行添加用户的Axios请求逻辑
  }
};

方案二：保留state用于UI展示时，在校验函数内处理后续逻辑 #

如果需要用checkUserExist状态在UI上展示提示（比如输入框下方显示“用户名已存在”），可以在校验完成后直接处理添加逻辑：

const [checkUserExist, setCheckUserExist] = useState(false)

const checkUserIfExist = async (username) => {
  const result = await axios.get(`http://localhost:3000/users?username=${username}`);
  const isExist = result.data.length > 0;
  setCheckUserExist(isExist);
  console.log(result.data.length);

  // 校验完成后直接处理逻辑
  if (isExist) {
    alert("You should change your username");
  } else {
    console.log("Successful");
    // 执行添加用户的操作
  }
};

const addUser = (username, password) => {
  checkUserIfExist(username);
};

注意事项 #

• 不要在调用setState后立刻依赖该状态值做判断，因为状态更新是异步的，新值要等到组件重新渲染后才会生效。
• 如果需要基于新状态做后续操作，要么在异步操作完成后直接使用返回值，要么通过useEffect监听状态变化来触发逻辑。

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