React使用useState无法更新表单提交按钮pending状态问题

你的加载状态无法正常展示的核心原因是useState用法错误，附带2个逻辑隐患：

• useState返回的第二个值是状态更新函数，必须通过函数调用传入新值才能触发组件重渲染。你代码中写的setIs_pending = true、setIs_pending = false属于普通变量赋值，根本不会触发React的状态更新流程，自然看不到切换后的按钮。
• 非加载状态的提交按钮缺少type="submit"属性，表单提交行为存在兼容性问题
• 没有处理接口请求报错场景，一旦请求抛出异常，is_pending会永远停留在true，按钮会永久处于加载禁用状态

修正后可直接运行的代码 #

import { useState } from 'react';
import axios from 'axios';

// 组件内部状态与逻辑
const [is_pending, setIs_pending] = useState(false);
// 其余表单项状态按你的原有逻辑保留即可
const [contact_name, setContact_name] = useState('');
const [contact_email, setContact_email] = useState('');
const [contact_body, setContact_body] = useState('');

const SubmitContact = async (e) => {
  e.preventDefault();
  // 正确调用状态更新函数，开启加载态
  setIs_pending(true);
  const url = "http://localhost:8000/my-api/";
  try {
    const res = await axios.post(url, {
      contact_name,
      contact_email,
      contact_body
    });
    console.log(res);
    // 提交成功后的业务逻辑写在这里
  } catch (err) {
    console.error('表单提交失败:', err);
    // 提交失败的提示逻辑写在这里
  } finally {
    // 无论请求成功/失败，最终都关闭加载态
    setIs_pending(false);
  }
}

// 表单JSX部分
<form onSubmit={SubmitContact}>
  {/* 其余表单项代码保持不变 */}
  {
    !is_pending 
    ? <button type="submit" className='btn btn-primary'>Send Message</button>
    : <button type='submit' className='btn btn-primary' disabled>Sending Message....</button>
  }
</form>

关键修改说明 #

• 所有状态更新改为函数调用形式：setIs_pending(true)、setIs_pending(false)，这是修复问题的核心
• 给默认状态的按钮补充type="submit"属性，保证表单提交行为一致
• 用try/catch/finally包裹异步请求，从根源上避免加载态卡死的问题
• 把原有混用await和.then的异步写法统一为async/await语法，逻辑更清晰不易出bug

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