[React 19] requestFormReset报告TypeError Cannot read properties of null (reading 'queue') on重复的表单提交

cl25kdpy  于 5个月前  发布在  React
关注(0)|答案(2)|浏览(61)

摘要

React团队,
我最近尝试了React 19中的新表单操作,我试图在短时间内通过多个表单提交来重现竞争条件。然而,在连续几次提交后,我偶尔会收到错误TypeError Cannot read properties of null (reading 'queue')
经过一些调查,我可以创建以下最小可复现步骤:

  1. 打开codesandbox.io/p/sandbox/confident-sky-8vr69k
function App() {
  const formAction = async () => {
    await new Promise((resolve) => setTimeout(resolve, 3000));
  };

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

export default App;
  1. 在文本框中输入"1"
  2. 提交表单
  3. 在3秒内(在客户端操作解决之前),再次提交表单
    预期行为:
    表单字段重置。
    实际行为:
    页面中断,报告以下TypeError:
TypeError: Cannot read properties of null (reading 'queue')
requestFormReset$1
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:7001:74
eval
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:6956:15
startTransition
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:6908:27
startHostTransition
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:6948:7
listener
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:16008:21
processDispatchQueue
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:16066:17
eval
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:16665:9
batchedUpdates$1
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:2689:40
dispatchEventForPluginEventSystem
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:16221:7
dispatchEvent
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:20127:11
dispatchDiscreteEvent
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:20095:11

我漏掉了什么吗?谢谢。

gjmwrych

gjmwrych1#

感谢您的反馈。Codesandbox对我来说无法加载,所以我创建了一个新的。我们也可以通过点击提交按钮来重现这个问题:
Screen.Recording.2024-06-25.at.10.33.38.mov
-- https://codesandbox.io/p/sandbox/confident-sky-8vr69k

  1. 输入一个值
  2. 提交表单
  3. 在表单操作解决之前再次提交
  4. 观察崩溃
ckocjqey

ckocjqey2#

感谢您修复了Codesandbox。顺便说一下,我使用的React是19.0.0-rc-3563387fe3-20240621

相关问题