nextProps.history.pu sh не выполняет рендеринг компонента при входе в систему

Question

У меня есть компонент высокого порядка, который перенаправляет пользователя на панель мониторинга при входе в систему. Проблема в том, что панель мониторинга не перерисовывается при перенаправлении.

    static getDerivedStateFromProps(nextProps) {
      if (nextProps.user.isAuthenticated) {
        nextProps.history.push("/dashboard");

      }
      if (nextProps.errors) {
        return { errors: nextProps.errors };
      }
      return null;
    }

Кто-нибудь знает, в чем может быть проблема? Я использую маршрутизатор ha sh, кстати

isAuthenticated (FullCode)

import React, { Component } from "react";
import { connect } from "react-redux";
import {  initLogin } from "../../actions/userActions";

export interface authHocProps {
  user?: any;
  history?: any;
  initLogin: () => void;
}
export interface authState {
  errors: object;
}
export default function(WrappedComponent) {
  class IsAuth extends Component<authHocProps, authState> {
    //   this line is magic, redirects to the dashboard after user signs up
    // this replace getDerivedStateFromPropss
    static getDerivedStateFromProps(nextProps) {
      if (nextProps.user.isAuthenticated) {
        nextProps.history.push("/dashboard");

      }
      if (nextProps.errors) {
        return { errors: nextProps.errors };
      }
      return null;
    }
    ourState: authState = {
      errors: {},
    };
    componentDidMount() {
      this.props.initLogin();
      if (this.props.user.isAuthenticated) {
        this.props.history.push("/dashboard");
      }

    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
  const mapStateToProps = (state: any) => ({
    user: state.user,
  });
  const mapDispatchToProps = (dispatch: any) => ({
    initLogin: () => dispatch(initLogin()),
  });
  return connect(mapStateToProps, mapDispatchToProps)(IsAuth);
}

Answer 1

Похоже, что ваша проблема может быть связана с тем, что вы пытаетесь использовать getDerivedStateFromProps для чего-то другого, чем его предназначение. Основываясь на документах , кажется, что это не место для побочных эффектов, а скорее цель - вернуть объект в состояние обновления. Даже смотря на ваш код, я не могу с уверенностью сказать, что знаю, почему он не работает, я думаю, что, используя правильный метод жизненного цикла, вы вполне можете решить свою проблему.

Я думаю, componentDidUpdate будет правильным методом жизненного цикла для использования здесь, и это будет выглядеть примерно так:

componentDidUpdate(prevProps) {
    if (prevProps.user.isAuthenticated) {
        prevProps.history.push("/dashboard");
    }
}

Answer 2

Я смог это исправить, спасибо @Chaim за меня в правильном направлении

componentDidUpdate(prevProps){
  if(prevProps.user.isAuthenticated !== this.props.user.isAuthenticated){
    this.props.history.push("/dashboard");
  }
  if (prevProps.errors) {
    this.setState({
      errors: prevProps.errors
    })
  }

}

Также с помощью <Router> вместо <HashRouter>