React表单中type为submit的按钮触发后useState钩子不生效问题求助

问题根源 #

你的代码核心问题是setSubmitLoading(false)的执行时机错误：setTimeout属于异步非阻塞API，你将加载状态重置的逻辑写在setTimeout外层，会和setSubmitLoading(true)同步依次执行，两次状态更新被React批量合并，最终submitLoading依然为false，自然看不到加载效果，和表单提交事件、组件重渲染没有关联。

修复方案 #

1. 将加载状态重置逻辑移动到setTimeout的回调函数内，确保异步流程执行完成后再修改状态
2. 给提交按钮添加disabled属性，加载状态下禁用点击，彻底避免重复提交

修正后的核心代码：

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  event.stopPropagation();
  const form = event.currentTarget;
  if (form.checkValidity()) {
    setSubmitLoading(true);
    console.log("valid form");
    setTimeout(() => {
      console.log("blah");
      // 异步逻辑执行完成后再重置加载状态
      setSubmitLoading(false);
    }, 5000);
  }
};

<Button
  type="submit"
  variant="success"
  disabled={submitLoading}
  style={{
    padding: submitLoading ? "0.375rem 3.875rem" : "0.375rem 0.8rem"
  }}
>
  {submitLoading ? (
    <Spinner size="sm" animation="border" />
  ) : (
    "Submit Form"
  )}
</Button>

如果是真实场景的API请求，同理把状态重置逻辑放到请求的then/catch回调，或者async/await的异步逻辑之后即可。

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