React 19 表单在初始渲染时意外提交多次

Question

我有一个带有简单表单的 vite React 19 应用程序。如果我正在查看“检查元素”选项卡，我的表单操作看起来像这样

action="javascript: throw new Error('React 表单意外出现 已提交。如果您手动调用 form.submit()，请考虑使用 改为 form.requestSubmit() 。如果您尝试使用 event.stopPropagation() 在提交事件处理程序中，还请考虑 调用 event.preventDefault().')"

我的实际代码

async function requestUsername(formData) {
  "use server"
  const username = formData.get("username")
  console.log("Requesting username: " + username)
}

export default function App() {
  return (
    <form action={requestUsername}>
      <input type="text" name="username" />
      <button type="submit">Request</button>
    </form>
  )
}

此代码是我从官方文档复制的 表单中的服务器操作

看起来提交操作在初始渲染时运行了多次，然后在镶边处停止。之后我就可以按预期使用它了。 有什么想法如何修复吗？

Answer 1

表单的

action

方法告诉表单提交后将数据发送到哪里。我相信您正在寻找

onSubmit

方法来传递您的函数。

export default function App() {
  return (
    <form onSubmit={requestUsername}>
      <input type="text" name="username" />
      <button type="submit">Request</button>
    </form>
  )
}

还有其他需要考虑的事情，检查元素选项卡中实际上有一个提示。当您将函数传递给表单 onSubmit 或按钮 onClick 时，该函数中处理的不是数据，而是事件。

实际上

 async function requestUsername(formData) {
  const username = formData.get("username")
  console.log("Requesting username: " + username)
}

有点不正确。它应该看起来更像：

async function requestUsername(event) {
  const username = event.target.get("username")
  console.log("Requesting username: " + username)
}

相关 StackOverflow 帖子此处。 您会注意到在那篇文章以及许多其他展示这一点的地方，人们使用

event.preventDefault()

或

event.stopPropogation()

或有时两者都使用。 （这里对差异进行了很好的细分）。这是因为，当您不阻止表单提交的默认行为时，它会刷新页面，然后重新呈现所有内容。由于我们希望通过 React 来控制所有渲染，这会产生不良行为。

我承认，我不确定为什么您在初始渲染时多次提交，这使得我的回答在技术上无关紧要，但我确实相信，如果您更正这些，您将看到您想要的行为，或者指向指向的信息实际问题。