React表单提交时页面自动刷新问题排查求助

开发个人资料修改功能时，点击提交按钮可将输入内容发送至服务器，但页面会自动刷新，控制台日志刚输出就消失。代码未编写刷新逻辑，怀疑问题出在register函数中。

问题原因 #

你的按钮嵌套在<form>标签内，浏览器默认会将<button>的type解析为submit，点击时触发表单的默认提交行为——浏览器会刷新页面并尝试发送传统表单请求，这就是页面自动刷新的根本原因，和register函数本身无关。

解决方法 #

提供两种简单有效的解决方案：

方案1：阻止事件默认行为 #

在register函数中调用事件对象的preventDefault()方法，阻止表单的默认提交动作：

const register = async (e) => {
  e.preventDefault(); // 新增此行，阻止表单默认提交
  console.log('forCheck')
  await axios({
    method: "patch", 
    url: "https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080//users/edit_profile",
    headers: {
      'X-ACCESS-TOKEN' : localStorage.getItem('jwt')
    },
    data: {
      "nickname" : originName,
      "id" : basicName,
    }
  })
  .then((response)=> {
    console.log('result', response.data.isSuccess);
  })
}

方案2：修改按钮类型 #

给按钮添加type="button"属性，明确指定这是一个普通操作按钮，不会触发表单提交：

<button 
  type="button" // 新增此行，声明按钮类型
  onClick={register}
  className='art1_2AsideDiv2Idvbutton'>
  submit
</button>

两种方案任选其一即可解决页面自动刷新的问题，控制台日志也能正常保留。

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