J'implémente 2 écrans en utilisant React-Navigation. Mais j'ai reçu l'avertissement ci-dessous lors de la navigation vers la deuxième page:

Avertissement: isMounted (...) est déconseillé dans les classes Javascript ordinaires. Au lieu de cela, assurez-vous de nettoyer les abonnements et les demandes en attente dans componentWillUnmount pour éviter les fuites de mémoire.

Versions:

  • réagir: 16.3.1
  • réactif natif: 0,55,2
  • react-navigation: 1.5.11
  • util: 0.10.3

Login.js

import React, { Component } from 'react';
import { Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
import styles from "./styles";

export default class Login extends Component {
    constructor(props) {
    super(props);
}

render() {
    const { navigate } = this.props.navigation;     
    return (
        <View style={styles.container}>         
            <View style={styles.formContainer}>                 
                <TouchableOpacity style={styles.button} onPress={()=> navigate('Home')} >
                    <Text style={styles.buttonText}>LOGIN</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

Home.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import styles from "./styles";

export default class Home extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { navigate } = this.props.navigation;
        return(
            <View style={styles.container}>         
                <Text>Home Screen</Text>
            </View>
        )
    }
}

Qu'est-ce que j'oublie ici?

31
Javascript Hupp Technologies 12 avril 2018 à 09:09

11 réponses

Meilleure réponse

Il s'agit d'un problème avec les dernières versions de React Navigation et React Native. Pour le faire taire, ajoutez:

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

Je m'attends à ce qu'il soit corrigé dans React Navigation dans les prochaines semaines.

59
James 12 avril 2018 à 07:48

C'est en fait un problème React-Native

Vous pouvez attendre et vérifier lorsqu'un correctif est disponible ici: https://github.com/facebook/react-native/issues/18868

Ou en attendant, vous pouvez masquer l'avertissement comme suggéré.

7
Erwan 9 mai 2018 à 16:42

Si vous utilisez EXPO pour le développement RN, ce problème est désormais résolu dans l'expo 27.0.2.

Voir https://forums.expo.io / t / warnings-after-upgrade-to-expo-27/9579/12

0
Pavel Krčmář 23 mai 2018 à 05:32

Ce n'est pas de react-navigation car j'ai examiné les node_modules et react-navigation n'utilise pas isMounted, cela vient de quelque part dans React-Native, J'ai également fait le même hack utilisé par @Romsun

    import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
0
Sarmad Shah 3 mai 2018 à 16:32

Le problème de react-navigation est maintenant fermé, vous pouvez regarder ici

Ils affirment que c'est un problème quelque part à l'intérieur de React-Native

0
Matan Bobi 3 mai 2018 à 13:19

Ignorer ce message est la mauvaise façon pour un bon développeur Si nous supprimons ce problème, la fuite de mémoire est diminuée.

0
Gajarajan 11 mai 2018 à 17:53

Si vous utilisez un client expo, mettez à jour votre version vers expo@27.0.2 qui corrige cet avertissement. . .

0
Manoj 12 juin 2018 à 14:22

Les réponses ci-dessus n'ont pas fonctionné pour moi, mais l'ajout de ce qui suit à index.js a fait l'affaire:

console.ignoreYellowBox = ['Warning: isMounted(...) is deprecated'];

Ou passez à l'expo 27.0.2 qui ajoute essentiellement ce qui précède à Expo.js. Voir plus d'informations ici: https: // forums .expo.io / t / warnings-after-upgrade-to-expo-27/9579/10

Comme certaines des autres réponses l'ont indiqué, il s'agit d'un problème react-native, donc nous espérons qu'il sera bientôt corrigé là-bas et ensuite dans la version suivante d'Expo.

0
Briano 3 juin 2018 à 10:58

Utilisez cette instruction dans index.js:

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
1
Ronan Boiteau 23 oct. 2018 à 08:16

Voici ce que j'ai fait pour ce problème pour le moment:

Étape 1: appuyez sur l'avertissement

Étape 2: Dans la fenêtre jaune, cliquez sur l'option de trace de pile en haut à droite

Étape 3: recherchez le chemin d'accès à l'avertissement, par exemple: C: \ Users \ username \ projectname \ node_modules \ react \ cjs \ react.development.js

Étape 4: ouvrir le chemin dans l'éditeur

Étape 5: recherchez le mot clé isMounted sous les API obsolètes et supprimez la fonction et l'avertissement obsolètes associés.

Étape 6: Enregistrez et rechargez votre application !! c'est tout

0
Javascript Hupp Technologies 11 juin 2018 à 06:42

La solution suivante fonctionne pour moi:

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
0
pissall 22 avril 2018 à 13:28