useEffect выполняется, несмотря на отсутствие изменений в зависимости

Question

Я прочитал несколько похожих вопросов и попробовал решения в каждом, но ни один из них, похоже, не работает и не соответствует моему варианту использования точно так же, как я использую реагирующий маршрутизатор.

В моем App.js я установилзначение refreshTokenId для некоторого UUID.У меня есть дочерний компонент в App.js, который при первоначальном рендеринге отправляет вызов API для получения некоторых данных.Теперь я добавил refreshTokenId в качестве зависимости от моего хука useEffect, в котором содержится вызов API.Я использую реагирующий маршрутизатор, и когда я перехожу со страницы и затем обратно, вызов API снова запускается, несмотря на тот факт, что зависимость (то есть refreshTokenId) не изменилась.Я подтвердил это, путешествуя во времени с помощью инструментов Redux Dev и наблюдая за состоянием.Первый и единственный раз, когда изменяется refreshTokenId, - это когда мой App.js монтируется.Это потому, что я изначально установил значение refreshTokenId в useEffect в App.js.

Я не понимаю, почему 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);

Answer 1

Вы можете использовать render вместо component:

<Route path="/manager" render={DataManager} />

Когда вы используете component , маршрутизатор создает новый компонент при каждом рендеринге.

Когда вы используете рендер , маршрутизатор просто переопределяет компонент.

Если вам нужно, т.е. для компонентов класса, вы можете передать функцию, которая возвращает JSX:

<Route
  path="/manager"
  render={(props) => <DataManager {...props} />}
/>