Accounts.verifyEmail breaks React app

help
1

Can anyone explain to me why this is happening?

I have a React Router <Route/> for /verify-email which renders a component looking like this:

class VerifyEmail extends React.PureComponent {
  constructor() {
    super();
    this.state = { error: null };
  }

  componentDidMount() {
    const { history } = this.props;
    const { params } = this.props.match;
    Accounts.verifyEmail(params.token, (error) => {
      if (error) {
        console.error('verifyEmail Error', error);
        Bert.alert(error.reason, 'danger');
        this.setState({ error: `${error.reason}. Please try again.` });
      } else {
        Bert.alert('E-Mail Adresse erfolgreich besätigt!', 'success');
        history.push('/');
      }
    });
  }

  render() {
    return (
      <div className="verify-email">
        <h4>
          {!this.state.error ? 'Bitte warten ...' : this.state.error}
        </h4>
      </div>
    );
  }
}

export default VerifyEmail;

The weird thing is: The component is rendered all over again. indefinitely. But it is not just rerendering, the constructor() is run all over again and again - I have never experienced this.
I just do not understand why this is happening. I don’t get it.
Any ideas on this?

2

Hey, did you ever solve this? I kinda hit the same wall over here and can’t figure out what to do.

3

I fell into always using prop-types with defaults where appropriate so I know my props are always valid.

Usually with constructor I do: constructor(props){ super(props) … }

Not sure what happens when you do not pass props to super.

Also:

Do your tests and live rendering behave differently?

Did you try just commenting out Bert.Alert (eliminate that dependency)