コンポーネントのアンマウントを中止しますか？

Question

私は複数のステップウィザードフォームを持っています。ここでは、検証エラーが発生した場合、次のステップに進むことはできません。

問題は、私はいつもブラウザ "戻る"ボタンを使用して前のステップ（既に検証に合格したステップ）に行き、いくつかの無効なデータに入力を変更し、ブラウザの進むボタンを現在のステップに戻すことができるそれは、私がバリデーションをバイパスしたことを意味します。私は現在のステップを離れる前にチェックを行うと、何かがうまくいかない場合は残して防ぐことができるかどう

が、私はわからないんだけど、私は

class Step2 extends Reac.Component { 
// ... 
compomentWillUnmount(){ 
    if(!form.isAllFieldsValid()){ 
     // display error and abort forward action 
    } 
} 
// ... 
} 

図のサンプルのようなものを実現したいと思います：

通常のフローは1、2、3、4などとなります。

私が対処しようとしている流れがあり、1、2、3、その後、STEP2の画面で、ユーザーを押しブラウザ戻るボタンは、STEP1にいくつかの不正な変更は、その後ブラウザ前進ボタンを押してください。私はそれが "前方"イベントをフックすることが可能かどうかを確認しようとしている、検証を行い、私はエラーメッセージでステップ1のままにするかどうかを決定するか、step2に進む。

トリッキーな部分が要件である、フォームデータは常に（ブラウザのメモリに）保存することが必要であるあなたが戻って

Answer 1

それらを回復することができますので、あなたが各ステップを離れるとき、それは本当にデータが有効で一度どこに行くに依存？私はそれが最終的な検証を行う直前に実際に送られてきた場所を言います。

あなたは「提出する」または工程の最後に「保存」ボタンを最終を持っている場合たとえば、あなたはおそらく多分axios（または別の非同期呼び出し）でonSaveを持っている：

async onSave() { 
    // ~~ insert validation around here ~~ // 
    const response = axios.post('foo/save', this.state.data); 
    this.setState({ 
     complete: true, 
    }); 
} 

それは実際にはマウント作業ではありません。アンマウントは、マウント時（または他の場所）に行った反応のないものをクリーンアップすることを意図しています。