後で情報を送信browserHistory.goBack

Question

私はreactjsでアプリケーションを構築していますが、ある時点で私はSearchFormを持っています。次にアイテムの1つをクリックし、そのビューに戻るボタンがあります。

私が望むのは、検索フォームに以前のデータを入力することです。私はすでにjavascriptからlocalStorageでそれを達成しました。そして、componentWillUnmountに状態を保存すると、問題は、私が戻ってきても到着しなくても、このデータは常にロードされるということです。

goBackに一種の状態を追加する方法はありますか？

Answer 1

ここで最も良い方法は、localStorageを使用せず、代わりにhistory状態を使用することです。ユーザーがフォームを更新すると

すると、あなたがこの（必要に応じてパフォーマンスを向上させるためにそれをデバウンス）行うことができます。

const {location} = this.props; 
const routeState = location.state && location.state.formData; 
if (routeState) { 
    this.setState({ 
    data: JSON.parse(routeState), 
    }); 
} 

：次に

history.replaceState(this.props.location.pathname, { 
    formData: JSON.stringify(formData), 
}); 

場合のコンポーネントの負荷を、あなたはこのようにその状態にアクセスすることができます

ページを更新するか、別のページに移動して戻るか、前に戻って前に進むと、その状態になります。彼らが新しいタブでそれを開いた場合、彼らは状態を持っていません。これは、通常、必要なフローです。