nextProps.history.push wordt niet opnieuw maken van het component bij het inloggen

stemmen
0

Ik heb een hoge orde component die redirects gebruiker dashboard bij de ondertekening in. De kwestie is het dashboard niet wordt opnieuw weergegeven na omleiding.

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

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

Zou iemand weten wat het probleem zou kunnen zijn? Ik ben met behulp van hash router door de manier

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);
}
De vraag is gesteld op 13/01/2020 om 23:51
bron van user
In andere talen...                            


2 antwoorden

stemmen
2

Het lijkt erop dat het probleem te wijten aan het feit dat je probeert te gebruiken zou kunnen zijn getDerivedStateFromPropsvoor iets anders dan het beoogde gebruik. Op basis van de documenten , het lijkt alsof dit is niet de plek voor bijwerkingen, maar het doel is om een object terug te keren om de update staat. Zelfs al te kijken naar uw code kan ik niet met zekerheid zeggen dat ik weet waarom het niet werkt, denk ik dat met behulp van de juiste levenscyclus methode die je kan heel goed het oplossen van uw probleem.

Ik denk dat componentDidUpdatezou de juiste levenscyclus methode om hier te gebruiken en het zou een beetje er ongeveer zo uitzien.


componentDidUpdate(prevProps) {
    if (prevProps.user.isAuthenticated) {
        prevProps.history.push("/dashboard");
    }
}
antwoordde op 14/01/2020 om 00:15
bron van user

stemmen
0

Was in staat om het probleem te verhelpen door dit te doen, dank @Chaim voor mij in de juiste richting

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

}

Ook door gebruik te maken <Router>in plaats van<HashRouter>

antwoordde op 14/01/2020 om 03:49
bron van user

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