web-dev-qa-db-fra.com

Attention: isMounted (...) est déconseillé dans les classes Javascript simples

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

Avertissement: isMounted (...) est obsolète dans les classes Javascript simples. Au lieu de cela, assurez-vous de nettoyer les souscriptions et les demandes en attente dans le composantWillUnmount pour éviter les fuites de mémoire.

Versions:

  • réagir: 16.3.1
  • react-native: 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?

javascriptreactjsreact-nativereact-navigation
25
Javascript Hupp Technologies

C'est un problème avec les dernières versions de React Navigation et React Native. Pour le réduire, ajoutez:

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

Je m'attends à ce que cela soit corrigé dans React Navigation d'ici quelques semaines.

55
James

Est-ce réellement un problème de React-Native?

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

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

6
Erwan

Utilisez cette déclaration dans index.js:

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

Ce n'est pas de react-navigation car j'ai jeté un œil dans les node_modules et react-navigation n'utilise pas isMounted, il provient de quelque part dans React-Native, J'ai également utilisé le même hack utilisé par @Romsun.

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

le problème de réaction de navigation est maintenant fermé, vous pouvez regarder ici

Ils déclarent que c'est un problème quelque part à l'intérieur de react-native

0
Pavel Krčmář

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: Trouvez le chemin où l'avertissement s'est produit, ex: C:\Utilisateurs\nom_utilisateur\nom_projet\noeud_modules\react\cjs\react.development.js

étape 4: Ouvrez le chemin dans l'éditeur

étape 5: Recherchez la clé Word isMounted sous les API obsolètes et supprimez la fonction obsolète et l’avertissement associé.

étape 6: Enregistrez et rechargez votre application!

0
Swasam

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

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

0
Pavel Krčmář

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

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

Ou mettez à niveau vers expo 27.0.2 qui ajoute 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 d'autres réponses l'ont indiqué, il s'agit d'un problème de react-native. Nous espérons donc que ce problème sera bientôt résolu dans la version suivante de Expo.

0
Briano

La solution suivante fonctionne pour moi:

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

Ignorer ce message est une mauvaise solution pour un bon développeur Si nous supprimons ce problème, la fuite de mémoire diminue.

0
Gajarajan

Si vous utilisez un client expo, mettez à jour votre version à [email protected], ce qui corrige cet avertissement. . .

0
Manoj