Reactで「Form submission canceled because the form is not connected」となる原因

管理者

4年前

現象
解決方法
参考サイト

現象

フォームのonSubmitイベントハンドラにて、react-router-domを使ってhistory.push('xxx')のように画面遷移を行うと、コンソールにForm submission canceled because the form is not connectedというエラーが表示される。

import React, {FC, FormEvent} from 'react';
import {useHistory} from 'react-router-dom';

const App: FC = () => {
  const history = useHistory();
  const handleFormSubmit = (event: FormEvent) => {
    // event.preventDefault();
    history.push('/aaa');
  }
  return (
    <form onSubmit={handleFormSubmit}>
      <button>送信</button>
    </form>
  )
};

export default App;

解決方法

フォームの送信をpreventDefaultメソッドでキャンセルすればよい。
（上記ソースのコメントアウトしている部分）

submitによる画面遷移とpushメソッドによる画面遷移が競合しているため、エラーが表示されると推測される。

window.location.href='xxx';の場合はこのエラーが表示されない。
pushメソッドがDOMのform要素を削除するような処理をしているのかもしれない。
※ 詳しい人、いましたらコメントをください

そもそも、このような書き方をしていること自体が間違っていて、type=”button”のボタンのclickイベントで画面遷移を行うのが一般的だと思われる。

現象

解決方法

参考サイト