Warning: isMounted(…) is deprecated in plain Javascript Classes

问题

I am implementing 2 screens using react-navigation. But I got the warning below while navigating to the second page:

Warning: isMounted(...) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.

Versions:

react: 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>
        )
    }
}

What am I missing here?

回答1:

This is a problem with latest React Navigation and React Native. To silence it add:

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

I expect it will be fixed in React Navigation within next few weeks.

回答2:

Is is actually a React-Native issue

You can wait and check when a fix is available here: https://github.com/facebook/react-native/issues/18868

Or in the meantime you can hide the warning like suggested.

回答3:

Use this statement in index.js:

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

回答4:

The following solution works for me:

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

回答5:

react-navigation issue is now closed, you can look here

They are stating that it is a problem somewhere inside of react-native

回答6:

This is not from react-navigation as i looked into the node_modules and react-navigation doesn't use isMounted, Its coming from somewhere within React-Native, I have also done same hack used by @Romsun

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

回答7:

Ignoring this message is the wrong way for a good developer If we remove this problem then the memory leakage is decreased.

回答8:

If you are using EXPO for RN development then this issue is now fixed in expo 27.0.2.

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

回答9:

The answers above didn't work for me, but adding the following to index.js did the trick:

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

Or upgrade to expo 27.0.2 which basically adds the above to Expo.js. See more information here: https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10

As some of the other answers stated, it's a react-native issue so hopefully it will be fixed soon there and then in the following version of Expo.

回答10:

This is what i did for this problem for the time being:

step 1:Tap on the warning

step 2: In the yellow window click on the stack trace option in top right

step 3: Find the path where the warning has occured,ex:C:\Users\username\projectname\node_modules\react\cjs\react.development.js

step 4: Open the path in editor

step 5: Find the key word isMounted under the deprecated api's and delete the deprecated function and warning related under it.

step 6: Save and reload your app!!thats it

回答11:

If you are using an expo client, update your version to expo@27.0.2 which fixes this warning. . .

来源：https://stackoverflow.com/questions/49789150/warning-ismounted-is-deprecated-in-plain-javascript-classes

标签

javascript

reactjs

react-native

react-navigation