nextProps.history.push nicht wieder macht die Komponente bei der Anmeldung

Question

nextProps.history.push nicht wieder macht die Komponente bei der Anmeldung

stimmen

0

Ich habe eine hohe Auftragskomponente dass Umleitungen Benutzer Armaturenbrett auf der Unterzeichnung. Das Problem ist, das Armaturenbrett ist nicht neu auf Umleitung gemacht zu werden.

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

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

Würde jemand wissen, was das Problem sein könnte? Ich bin mit Hash-Router von der Art und Weise

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);
}

reactjs redux

Veröffentlicht am 13/01/2020 um 21:51
quelle vom benutzer BARNOWL

In anderen Sprachen...

2 antworten

Chaim Friedman · Answer 1 · 2020-01-13 22:15

Scheint , wie Ihr Problem auf die Tatsache zurückzuführen sein könnte , dass Sie versuchen , verwenden getDerivedStateFromPropsfür etwas anderes als den bestimmungsgemäßen Gebrauch. Auf der Grundlage der Dokumente , wie es scheint dies nicht der richtige Ort für Nebenwirkungen ist, sondern das Ziel ist es, ein Objekt zu aktualisieren Zustand zurückzukehren. Auch tho an Ihrem Code suchen Ich kann nicht sicher sagen , dass ich weiß , warum es nicht funktioniert, ich glaube durch die richtige Lebenszyklus - Methode sehr gut Sie können Ihr Problem lösen.

Ich denke , componentDidUpdatewäre die richtige Lebenszyklus Methode sein , hier zu verwenden , und es wäre ein wenig etwas wie folgt aussehen.


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

BARNOWL · Answer 2 · 2020-01-14 01:49

stimmen

0

War in der Lage, es zu beheben, indem Sie diese dank @Chaim für mich in der richtigen Richtung

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

}

Auch unter Verwendung <Router>Anstelle<HashRouter>

Beantwortet am 14/01/2020 um 01:49
quelle vom benutzer BARNOWL