Réagir avertissement sur setState dans démonté composant

J'obtiens cette erreur:

avertissement.js:33 Avertissement: ne Peut pas appeler setState (ou forceUpdate) sur un
démonté composant. C'est un no-op, mais il indique une fuite de mémoire
dans votre application. Pour corriger, annuler tous les abonnements et asynchrone
tâches dans le componentWillUnmount méthode.

Mais je ne suis pas à l'aide d'un componentWillUnMount méthode.

Je suis en utilisant un HOC pour s'assurer que l'utilisateur est authentifié avant d'accéder à leur compte itinéraire.

Voici l'Itinéraire:

<StyleRoute props={this.props} path="/account" component= 
{RequireAuth(Account)} />

où RequireAuth est le HOC. Voici le HOC:

 import { withRouter } from 'react-router';

export default function RequireAuth(Component) {

  return class AuthenticatedComponent extends React.Component {

    componentWillMount() {
      this.checkAuth();
    }

    checkAuth() {
      if ( ! this.props.isAuthenticated) {
        this.props.history.push(`/`);
      }
    }

    render() {
      return this.props.isAuthenticated
        ? <Component { ...this.props } />
        : null;
    }

  }

  return withRouter(AuthenticatedComponent);
}

Le code fonctionne comme prévu, mais j'obtiens cette erreur quand /compte rendu. Comme vous le remarquez, nulle part dans mon code il y a un componentWillUnMount méthode. Je suis vraiment à une perte pour pourquoi cet avertissement ne cesse d'apparaître et de toute info serait utile.

---

Mise à jour 5/23/18:

Pour se débarrasser de l'erreur et ont encore des accessoires de passer vers le bas, j'ai fait deux chose:

1) j'ai opté pour un avoir deux des fonctions d'ordre supérieur dans l'Application parente composant au lieu d'utiliser le HOC. Un ordre supérieur de la fonction est pour le passage des accessoires et de l'autre pour vérifier l'authentification. J'avais du mal à passer tous les accessoires autres que le navigateur de l'histoire, d'où le renderProps fonction ci-dessous.

renderProps = (Component, props) => {
  return (
      <Component {...props} />
    );
}

checkAuth = (Component, props) => {
    if (props.isAuthenticated) {
        return <Component {...props} />
    }
    if (!props.isAuthenticated) {
        return <Redirect to='/' />
    }
}

2) Pour les utiliser, j'ai eu à l'utilisateur de rendu dans mon Itinéraire, par opposition à un composant.

//I could pass props doing this, sending them through the above functions
<Route exact path="/sitter-dashboard" render={ () => this.checkAuth(SitterDashboard, this.props) } />
<Route exact path={"/account/user"} render={() => this.renderProps(User, this.props)} />

//I couldn't pass props doing this
<Route {...this.props} exact path="/messages" component={Messages} />

Voici la documentation sur le routeur vs composant comme un Itinéraire méthode de rendu: https://reacttraining.com/react-router/web/api/Route/route-render-methods

Aussi, voici une bonne explication sur Un Débordement De Pile

Enfin, j'ai utilisé ce code à partir du Réagir Routeur 4 documentation comme modèle pour ce que j'ai fait ci-dessus. Je suis sûr que le dessous est plus propre, mais je suis encore à apprendre et ce que j'ai fait fait un peu plus de sens pour moi.

const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
  {...rest}
  render={props =>
  fakeAuth.isAuthenticated ? (
       <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

OriginalL'auteur Cameron Tharp | 2018-04-25