React函数组件异步请求后修改state不生效问题排查解决

问题核心是AuthService.login为异步函数，原代码未使用await等待其执行完成就直接判断返回值：

• 异步函数默认返回Promise对象，pending状态的Promise转为布尔值恒为true，因此!AuthService.login(event.target)的结果永远是false，if分支内的setIsLoading(false)永远不会触发
• 原代码的提交事件逻辑拆分不合理，loading状态的切换应该统一放在提交处理逻辑内维护，避免时序混乱

首先修改handleSubmit为异步函数，统一维护loading状态，同时移除form标签onSubmit里冗余的setIsLoading(true)逻辑：

// 修复后的handleSubmit逻辑
async function handleSubmit (event) {  
  event.preventDefault();
  // 提交开始直接设为加载中，统一在这里维护状态
  setIsLoading(true)
  try {
    await AuthService.login(event.target);
    // 登录成功的后续逻辑可在这里补充
  } catch (e) {
    // 登录失败的错误处理，比如弹出错误提示
    console.log('登录失败', e);
  } finally {
    // 无论请求成功或失败，最终都关闭加载状态
    setIsLoading(false)
  }
}

对应修改form标签的提交事件绑定：

<form className={classes.form} noValidate onSubmit={handleSubmit}>

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