1

私はいくつかの同様の質問を読み、それぞれの解決策を試しましたが、どれも機能していないようで、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);
4

1 に答える 1