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?