React onClick事件中依次调用handleChange与onSubmit函数的异常问题

• 优先排查按钮默认提交行为：你使用的Material UI Button组件如果位于<form>标签内部，未指定type时默认是提交类型，点击会触发浏览器默认表单提交行为，导致页面刷新/上下文销毁。非阻塞的react-toastify toast会随页面刷新中断，而同步阻塞的alert会阻止默认提交执行，所以换alert可以正常运行。
  修复方式：给Button组件显式添加type="button"属性，禁用默认提交行为：

  <Button
    variant="contained"
    type="button"
    onClick={onSubmit}
  >
  

• 调整onSubmit内部执行顺序，符合你要求的先执行handleChange的逻辑：

  const onSubmit = ()=> {
    handleChange();
    reset();
    toast("Default Notification !");
  };
  

• 若调整后toast仍不触发，可检查reset方法是否会同步卸载对话框组件，若存在该情况可以调换reset和toast的执行顺序，先触发toast再关闭对话框：

  const onSubmit = ()=> {
    handleChange();
    toast("Default Notification !");
    reset();
  };
  

补充说明：handleChange中的setChange是React的批量异步更新逻辑，不会阻塞后续同步代码执行，无需特殊处理即可保证你要的执行顺序。

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