nextProps.history.push no es re haciendo que el componente al iniciar sesión

votos
0

Tengo un componente de alto orden que redirige al usuario a la firma en el salpicadero. La cuestión es el tablero de instrumentos no está siendo re rindió al redireccionamiento.

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

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

¿Hay alguien que sabe lo que podría ser el problema? Estoy utilizando el router de hash por cierto

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);
}
Publicado el 13/01/2020 a las 21:51
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
2

Parece que el problema podría deberse al hecho de que está intentando utilizar getDerivedStateFromPropspara algo más que su uso previsto. Sobre la base de los documentos , parece que este no es el lugar para los efectos secundarios, sino que el objetivo es devolver un objeto de estado de actualización. Incluso aunque mirando su código no puedo decir con seguridad que yo sepa por qué no está funcionando, yo creo que al utilizar el método de ciclo de vida correcto que muy bien puede resolver su problema.

Creo que componentDidUpdatesería el método de ciclo de vida correcto a utilizar aquí y que se vería un poco algo como esto.


componentDidUpdate(prevProps) {
    if (prevProps.user.isAuthenticated) {
        prevProps.history.push("/dashboard");
    }
}
Respondida el 13/01/2020 a las 22:15
fuente por usuario

votos
0

Fue capaz de fijarlo al hacer esto, gracias @Chaim para mí en la dirección correcta

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

}

También mediante el uso de <Router>su lugar de<HashRouter>

Respondida el 14/01/2020 a las 01:49
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more