React提交表单时console.log、window.alert不显示问题排查

你写的alert、控制台打印不生效，核心是代码执行顺序和页面刷新逻辑写反了：

• 第一处致命错误：handleSubmit函数第一行就执行了window.location.reload(false)，这行代码会立刻触发整页刷新，当前页面的JS执行上下文会被直接销毁。你看到的请求能正常入库，是因为fetch请求发出后是由浏览器网络层独立处理的，不受页面刷新影响，但请求返回后的.then回调、window.alert、console.warn逻辑根本没机会执行，而且控制台日志会在页面刷新时被直接清空。
• 第二处错误：event.preventDefault()位置错误。这行阻止表单默认提交跳转的代码被放在了fetch请求之后，没有第一时间拦截表单默认的提交跳转行为，本身也会导致页面提前跳转，打断后续代码执行。
• 额外隐患：你混用了async/await和.then链式写法，没有加异常捕获，同时注释掉了JSON格式的请求头，就算修复了刷新问题，一旦接口请求报错、返回格式不符合预期，也会导致回调逻辑不执行，还可能出现后端无法正确解析提交参数的问题。

1. 删掉handleSubmit开头的window.location.reload(false)，如果提交成功后需要刷新页面，要把刷新逻辑放到请求成功的回调里执行
2. 把event.preventDefault()移到handleSubmit函数的第一行，第一时间阻止表单默认跳转行为
3. 理顺异步请求逻辑，加上错误捕获，恢复正确的JSON请求头

修复后的参考代码：

export default function RegisterForm(data) {
  const [username, setusername] = React.useState("");
  const [email, setemail] = React.useState("");
  const [password, setpassword] = React.useState("");


  const handleSubmit = async (event) => {
    // 第一时间阻止表单默认提交
    event.preventDefault();
    try {
      const response = await fetch(`http://127.0.0.1:5000/register`,{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({username: username, email: email, password: password })
      })
      const resp = await response.json()
      window.alert(JSON.stringify(resp))
      console.warn(resp)
      // 如果需要提交成功后刷新，在这里执行刷新逻辑
      // window.location.reload(false)

      // 清空表单
      setusername("");
      setemail("");
      setpassword("");
    } catch(err) {
      console.error('注册请求失败:', err)
      window.alert('提交失败，请重试')
    }
  } 

  // 注意：表单组件需要绑定onSubmit={handleSubmit}，不要忘了给输入框绑定onChange事件更新state
  return (
    <form onSubmit={handleSubmit}>
      {/* 你的表单输入项代码 */}
    </form>
  )
}

注意：检查表单JSX是否正确绑定了onSubmit事件到handleSubmit，输入框是否绑定了对应的onChange事件更新state，否则也会出现取值异常的问题。

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