警告：isMounted(...) 在纯 Javascript 类中已弃用

Posted 2023-02-22

【中文标题】警告：isMounted(...) 在纯 Javascript 类中已弃用

【英文标题】：Warning: isMounted(...) is deprecated in plain Javascript Classes

【发布时间】：2018-09-22 04:04:33

【问题描述】：

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

。相反，请确保清理 componentWillUnmount 中的订阅和挂起的请求，以防止内存泄漏。

版本：

反应：16.3.1 反应原生：0.55.2 反应导航：1.5.11 实用程序：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>
        )
    

我在这里错过了什么？

【问题讨论】：

从外观上看，您安装了一个旧模块，它可能正在调用已弃用的isMounted 方法。尝试将它们一一删除，直到警告消失。我的猜测是react-navigation。您是否尝试安装最新版本？

是的，我将所有 4 个模块都更新到了最新版本，但对我没有用。甚至也尝试过降级。

您是否尝试将它们一一删除？另外，除了 home.js 和 login.js，你还有其他页面吗？

不，我没有任何其他页面，好的，让我尝试在没有导航的情况下呈现主页。

哦，是的，onPress=()=> navigate('Home') 似乎有问题，因为当没有导航默认呈现主页时，警告就会消失。

【参考方案1】：

这是最新的 React Navigation 和 React Native 的问题。要使其静音，请添加：

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

我希望它会在接下来的几周内在 React Navigation 中得到修复。

【讨论】：

谢谢，但是除了保持沉默这个警告没有其他解决方案吗？

他们声称不是 React Navigation 导致了这个问题。 github.com/react-navigation/react-navigation/issues/3956

我在哪里放置此代码？当我将它放在我的 App.js 组件中时没有工作。 （使用 crna cli）

放在index.js

虽然此解决方案使 YellowBox 消息静音，但它似乎对调试器中的输出静音没有任何影响，其中消息每秒重复多次。

【参考方案2】：

实际上是一个 React-Native 问题

您可以在此处等待并检查何时有可用的修复： https://github.com/facebook/react-native/issues/18868

或者与此同时，您可以像建议的那样隐藏警告。

【讨论】：

根据那个 GItHub 问题，它已在 react-native v0.57.0 中修复

【参考方案3】：

在index.js中使用此语句：

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

【参考方案4】：

以下解决方案适用于我：

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

【参考方案5】：

react-navigation issue 现已关闭，大家可以看here

他们说这是 react-native 内部某个地方的问题

【讨论】：

是的，我看过但事实是当navigate('page_name')被调用时会发出警告

【参考方案6】：

这不是来自 react-navigation，因为我查看了 node_modules 和 react-navigation 不使用 isMounted，它来自 React-Native 中的某个地方， 我也做过@Romsun 使用的相同技巧

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

【参考方案7】：

忽略此消息对于优秀的开发人员来说是错误的方式 如果我们消除这个问题，那么内存泄漏就会减少。

【讨论】：

这个答案很简洁，应该是注释吧？有时更多细节将不胜感激。不过，谢谢，因为减少内存泄漏始终是一个重要目标。

@Gajarajan 是的，但在我们没有其他解决方案之前。

我们要继续关注讨论here

【参考方案8】：

如果您使用 EXPO 进行 RN 开发，那么这个问题现在已在 expo 27.0.2 中得到修复。

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

【讨论】：

您能否在此处的答案中包含有关如何将 expo 更新到最新版本的部分？ （使用块引用）这样，该页面的未来访问者会更快地找到解决方案。谢谢！

仅供参考，这不是仅链接的答案。答案说这是一个错误，并在更高版本的 Expo 中得到了解决。该链接是备份该链接的参考

【参考方案9】：

上面的答案对我不起作用，但将以下内容添加到 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 版本中得到修复。

【参考方案10】：

这是我暂时针对这个问题所做的：

第一步：点击警告

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

第三步：找到出现警告的路径，例如：C:\Users\username\projectname\node_modules\react\cjs\react.development.js

第四步：在编辑器中打开路径

第五步：在deprecated api下找到关键字isMounted，将其下的deprecated function和warning相关删除。

第 6 步：保存并重新加载您的应用！！就是这样

【参考方案11】：

如果您使用的是 expo 客户端，请将您的版本更新为 expo@27.0.2 以修复此警告。 . .