私はいくつかの同様の質問を読み、それぞれの解決策を試しましたが、どれも機能していないようで、react-router を使用しているようにユースケースと正確に一致しません。
私の App.js では、refreshTokenId の値を UUID に設定しました。App.js に子コンポーネントがあり、最初のレンダリングで API 呼び出しを送信してデータをフェッチします。これで、refreshTokenId を依存関係として、API 呼び出しが含まれている useEffect フックに追加しました。反応ルーターを使用していますが、ページから移動して戻ると、依存関係 (つまり、refreshTokenId) が変更されていないにもかかわらず、API 呼び出しが再度発生します。Redux 開発ツールで時間を移動し、状態を観察することで、これを確認しました。refreshTokenId が最初に変更されるのは、App.js がマウントされたときだけです。これは、最初に App.js の useEffect で refreshTokenId の値を設定したためです。
依存関係が変化していないのに、サブコンポーネントの useEffect が起動する理由がわかりません。問題を示すために、以下にいくつかのコードを配置しました。
childComponent:
const DataManager = (props) => {
const refreshTokenId = props.refreshTokenId
useEffect(() =>{
props.datasetInfoRequest()
}, [refreshTokenId]); <---refreshTokenId does not change when routing around
const mapDispatchToProps = dispatch => {
return {
datasetInfoRequest: () => dispatch(actions.datasetInfoInit())
}
const mapStateToProps = state => {
return {
refreshTokenId: state.refresh.refreshTokenId,
lastRefreshed: state.refresh.lastRefreshed
}
};
export default connect(mapStateToProps, mapDispatchToProps)(DataManager);
App.js
const App = (props)=> {
useEffect(()=>{
props.refresh();
},[]);
return (
<div className="App">
<Switch>
<Route path = "/manager" component = {DataManager} />
<Route path = "/index" component = {HomePage} />
<Route path = "/logout" component = {Logout} />
</Switch>
</div>
);
}
const mapDispatchToProps = dispatch => {
return{
refresh: () => dispatch(actions.appRefresh())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(App);