logo标签列表

警告：在普通的JavaScript类中，isMounted(...)已被弃用

javascriptreactjsreact-nativereact-navigation
34

我正在使用react-navigation实现两个屏幕。但是在导航到第二个页面时，我收到了以下警告：

警告：isMounted(...)在纯JavaScript类中已被弃用。相反，请确保在componentWillUnmount中清理订阅和挂起的请求，以防止内存泄漏。

版本信息:

  • 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>
    )
}

主页.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>
        )
    }
}

我在这里缺少什么？

看起来，你安装了一个旧模块，可能调用了已弃用的 isMounted 方法。尝试逐个删除它们，直到警告消失。我猜测是 react-navigation。你尝试安装最新版本了吗？ - Ray
是的，我将所有4个模块更新到最新版本，但对我来说没有用。甚至也尝试了降级。 - Javascript Hupp Technologies
你尝试逐个删除它们了吗？另外，除了home.js和login.js之外，你还有其他页面吗？ - Ray
不，我没有其他页面，好的让我尝试渲染没有导航栏的主页。 - Javascript Hupp Technologies
噢，是的，似乎onPress={()=> navigate('Home')}存在问题，因为当默认呈现主页而没有导航时，警告消失了。 - Javascript Hupp Technologies
好的...你的问题可能与你选择的路由器有关。尝试使用另一个。我个人使用Wix的react-native-navigation，但如果你不想本地实现导航，也可以使用react-native-router-flux。 - Ray
11个回答
58

这是最新版React Navigation和React Native的一个问题。要消除它，请添加：

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

我预计React Navigation会在接下来的几周内解决这个问题。

2
谢谢，但除了保持沉默这个警告之外，没有其他的解决方案吗？ - Javascript Hupp Technologies
2
他们声称问题不是由React Navigation引起的。https://github.com/react-navigation/react-navigation/issues/3956 - Fook
1
我应该把这段代码放在哪里？当我把它放在我的App.js组件中时，它没有起作用。（使用crna cli） - Giesburts
4
将其放置在 index.js 文件中。 - AJ Genung
最后一条评论中提到的修复已经包含在新的0.56版本候选版中。 - MoralCode
1
虽然这个解决方案可以消除YellowBox消息，但似乎对于在调试器中消除输出没有任何影响，因为该消息每秒钟会重复多次。 - Myk Willis
7
1
根据那个GitHub问题，在react-native v0.57.0中已经修复。 - Andrew
1
在 index.js 中使用以下语句：
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
0

这不是来自react-navigation，因为我查看了node_modules，react-navigation没有使用isMounted，它来自React-Native的某个地方， 我也使用了@Romsun使用的同样的黑客

    import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
0
以下解决方案适用于我：
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
0

上面的回答对我来说都不起作用，但将以下内容添加到index.js中就解决了问题：

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

或者升级到expo 27.0.2，它基本上将上述内容添加到Expo.js中。在此处查看更多信息：https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10

正如其他答案所述，这是一个react-native问题，希望很快就能在下一个版本的Expo中得到解决。

0

目前我为这个问题所做的是：

步骤1：点击警告

步骤2：在黄色窗口中，点击右上角的堆栈跟踪选项

步骤3：找到警告发生的路径，例如：C:\Users\username\projectname\node_modules\react\cjs\react.development.js

步骤4：在编辑器中打开该路径

步骤5：在弃用的API下查找关键字isMounted，并删除其下的弃用函数和相关警告。

步骤6：保存并重新加载您的应用程序！就这样

0

如果您正在使用Expo客户端，请将版本更新为expo@27.0.2，该版本修复了此警告。...

0

react-navigation问题现在已经关闭，您可以 在这里查看

他们表示这是在react-native内部的某个问题。

是的，我查看了，但事实是当调用 navigate('page_name') 时会出现警告。 - Javascript Hupp Technologies
0

忽略这条消息是一个好的开发者不应该做的事情。 如果我们解决了这个问题，那么内存泄漏就会减少。

这个回答非常简洁，也许应该作为评论？有时候更多的细节会更受欢迎。不过，感谢您，因为减少内存泄漏始终是一个重要的目标。 - JosephDoggie
@Gajarajan 是的，但在我们没有其他解决方案之前。 - Javascript Hupp Technologies
我们必须在这里（https://github.com/facebook/react-native/issues/18868）保持讨论的关注。 - Javascript Hupp Technologies
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接