Forum : React Native Warning

Bonjour,

Je début sur react native j'ai commencé une petite application teste pour m'entraîner et je me retrouve avec un WARN que j'ai du mal comprendre.
J'ai regardé sur Internet et je suis tombé sur des posts sur d'autres forums, il parlait en gros de décharger... En utilisant la méthode componentWillUnmount.
Mais je ne comprends pas comment l'ajouter par rapport à mon cas !
Mon erreur est :

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method

pour expliquer le processus, j'ai un screen de connexion, une fois connecter, il envoie vers une page pour géolocaliser (lat, lon) l'utilisateur, il fait un 1er requête pour récupérer l'info de l'utilisateur qu'il récupère dans le store et envois la localisation (une fois qu'il a cliqué sur le bouton) au reducer et il arrive sur "l'index", jusque la pas de message de WARN.
Quand je quitte l'application et que je viens, l'utilisateur passer par la page de connexion puis la localisation (voir process plus haut) et arrive sur l'index et fait un seconde requête pour récupérer l'info de l'utilisateur qu'il récupère dans le store plus la localisation et la le WARN s'affiche en bas.

Merci d'avance pour votre aide ! ^^

2 réponses

Pandazaur

Bonjour, en gros ce que le warning te dit c'est que tu n'est plus dans le composant X, mais ce composant X continue de faire des setState, ce qui est problématique.

As-tu des listeners qui sont créés sur cette page ? As-tu localisé la page qui te cause ce warning ?

Alexe

Auteur

Effectivement, j'avais

_getLocationAsync = async () => {
        let { status } = await Permissions.askAsync(Permissions.LOCATION)
        if (status !== 'granted') {
            this.setState({
                errorMessage: 'Permission to access location was denied',
            });
        }

        let location = await Location.getCurrentPositionAsync({});

        this.setState({
            lat: location.coords.latitude,
            lon: location.coords.longitude
        })
    }

Qui etait appellé dans le componentDidMount et quand l'utilisateur est connecté et localisé, _getLocationAsync etait quand même appelé
Du coup pour rectifié le WARN, j'ai fais une condition qui regarde si la localisation existe dans le AsyncStorage si oui redirection si non j'appel _getLocationAsync.

Comme je l'ai dis je débute tout juste sur React donc je sais pas si je mais la bonne pratique en place ! ^^

En tout cas merci pour ta réponse ! :D