React 19并发表单提交报错：TypeError读取null的queue属性

React 19原生表单的异步处理机制中，当首个表单提交仍处于pending状态时，重复提交会触发内部状态冲突——React在处理新提交时，可能已清理了前一次提交关联的内部队列引用，导致读取null的queue属性抛出错误。

1. 禁用提交按钮防止重复提交 #

通过状态跟踪提交状态，在请求pending时禁用提交按钮，从根源避免重复提交：

import { useState } from 'react';

function App() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const formAction = async () => {
    setIsSubmitting(true);
    try {
      await new Promise((resolve) => setTimeout(resolve, 3000));
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form action={formAction}>
      <input type="text" name="name" />
      <input type="submit" disabled={isSubmitting} />
    </form>
  );
}

export default App;

2. 使用React 19的useFormStatus钩子控制提交状态 #

React 19提供的useFormStatus钩子可直接获取当前表单的提交状态，无需手动维护状态：

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <input type="submit" disabled={pending} />;
}

function App() {
  const formAction = async () => {
    await new Promise((resolve) => setTimeout(resolve, 3000));
  };

  return (
    <form action={formAction}>
      <input type="text" name="name" />
      <SubmitButton />
    </form>
  );
}

export default App;

3. 取消前次异步请求（可选） #

若需要允许用户发起新提交并取消前次请求，可使用AbortController终止未完成的异步操作：

import { useState } from 'react';

function App() {
  const [abortController, setAbortController] = useState(null);

  const formAction = async () => {
    // 取消前次请求
    if (abortController) {
      abortController.abort();
    }
    const newController = new AbortController();
    setAbortController(newController);

    try {
      await new Promise((resolve, reject) => {
        const timer = setTimeout(resolve, 3000);
        newController.signal.addEventListener('abort', () => {
          clearTimeout(timer);
          reject(new Error('Request aborted'));
        });
      });
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error(error);
      }
    } finally {
      setAbortController(null);
    }
  };

  return (
    <form action={formAction}>
      <input type="text" name="name" />
      <input type="submit" />
    </form>
  );
}

export default App;

React 19表单系统会在action函数成功执行后自动重置表单字段；若请求中止或失败，需手动调用form.reset()或结合useFormState钩子处理重置逻辑。

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