Next.js表单提交时handleSubmit函数中event.preventDefault()后的console.log未输出问题求助

看起来你踩了一个新手常犯的小坑，先给你最直接的结论：你在终端里找这个console.log的输出是找不到的——console.log的内容是输出在浏览器的开发者工具控制台里，而不是Next.js的终端日志。

接下来给你一步步的排查和验证方案：

1. 打开浏览器控制台查看日志 #

打开你的页面，按下F12（或者Ctrl+Shift+I/Command+Option+I）打开开发者工具，切换到「Console」标签页，然后再提交表单，你应该就能看到index#log1的输出了。

如果还是看不到，检查控制台的过滤选项：确保没有选中「Errors」「Warnings」等过滤条件，要选择「All」或者「Verbose」，避免日志被过滤掉。

2. 解决页面跳转太快导致日志被清除的问题 #

有时候页面跳转（Router.push）会刷新页面，导致之前的控制台日志被清除，你可以通过两种方式验证：

• 延迟跳转，给足够时间查看日志：

  async function handleSubmit(event: any) {
    event.preventDefault()
    console.log('index#log1')
    // 延迟1秒跳转，方便看日志
    setTimeout(() => {
      Router.push('/dashboard')
    }, 1000)
  }
  

• 利用Router.push的回调函数，在跳转完成后再输出日志：

  async function handleSubmit(event: any) {
    event.preventDefault()
    Router.push('/dashboard', () => {
      console.log('index#log1') // 跳转完成后输出，不会被清除
    })
  }
  

3. 额外排查点（概率较低） #

如果上面的方法都没用，可以试试去掉handleSubmit的async关键字——虽然你的代码里没有使用await，但有时候async函数的Promise特性可能会导致一些意外的时序问题，改成普通函数试试：

function handleSubmit(event: any) {
  event.preventDefault()
  console.log('index#log1')
  Router.push('/dashboard')
}

另外，也可以检查你的表单是否有其他潜在的问题，比如有没有其他元素阻止了默认事件？不过从你的代码看，event.preventDefault()已经正确调用了，而且页面能正常跳转，这部分应该没问题。

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