警告：isMounted(...) 在普通 Javascript 类中已弃用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49789150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Warning: isMounted(...) is deprecated in plain Javascript Classes
提问by Javascript Hupp Technologies
I am implementing 2 screens using react-navigation. But I got the warning below while navigating to the second page:
我正在使用 react-navigation 实现 2 个屏幕。但是我在导航到第二页时收到了以下警告：
Warning: isMounted(...) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.
警告： isMounted(...) 在普通 Javascript 类中已弃用。相反，请确保清除 componentWillUnmount 中的订阅和未决请求以防止内存泄漏。
Versions:
版本：
- react: 16.3.1
- react-native: 0.55.2
- react-navigation: 1.5.11
- util: 0.10.3
- 反应：16.3.1
- 反应原生：0.55.2
- 反应导航：1.5.11
- 实用程序：0.10.3
Login.js
登录.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
主页.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?
我在这里错过了什么？
回答by James
This is a problem with latest React Navigation and React Native. To silence it add:
这是最新的 React Navigation 和 React Native 的问题。要使其静音，请添加：
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.
我希望它会在接下来的几周内在 React Navigation 中得到修复。
回答by Erwan
Is is actually a React-Native issue
实际上是一个 React-Native 问题
You can wait and check when a fix is available here: https://github.com/facebook/react-native/issues/18868
您可以在此处等待并检查修复何时可用：https: //github.com/facebook/react-native/issues/18868
Or in the meantime you can hide the warning like suggested.
或者与此同时，您可以按照建议隐藏警告。
回答by Diksha Nagpal
Use this statement in index.js:
在index.js以下情况下使用此语句：
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
回答by Romsun Pramudito
The following solution works for me:
以下解决方案对我有用：
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
回答by Pavel Kr?má?
回答by Sarmad Shah
This is not from react-navigationas i looked into the node_modules and react-navigationdoesn't use isMounted, Its coming from somewhere within React-Native,
I have also done same hack used by @Romsun
这不是来自react-navigation我查看 node_modules 并且react-navigation不使用isMounted，它来自 React-Native 中的某个地方，我也完成了@Romsun 使用的相同黑客攻击
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
回答by Gajarajan
Ignoring this message is the wrong way for a good developer If we remove this problem then the memory leakage is decreased.
对于优秀的开发人员来说，忽略此消息是错误的方法 如果我们消除了这个问题，那么内存泄漏就会减少。
回答by Pavel Kr?má?
If you are using EXPO for RN development then this issue is now fixed in expo 27.0.2.
如果您使用 EXPO 进行 RN 开发，那么此问题现在已在 expo 27.0.2 中修复。
See https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/12
见https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/12
回答by Briano
The answers above didn't work for me, but adding the following to index.jsdid the trick:
上面的答案对我不起作用，但添加以下内容可以解决问题index.js：
console.ignoreYellowBox = ['Warning: isMounted(...) is deprecated'];
Or upgrade to expo 27.0.2which basically adds the above to Expo.js. See more information here: https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10
或者升级到 expo27.0.2基本上将上述内容添加到Expo.js. 在此处查看更多信息：https: //forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10
As some of the other answers stated, it's a react-nativeissue so hopefully it will be fixed soon there and then in the following version of Expo.
正如其他一些答案所述，这是一个react-native问题，所以希望它会很快在那里修复，然后在下一版本的 Expo 中修复。
回答by Swasam
This is what i did for this problem for the time being:
这就是我暂时为这个问题所做的：
step 1:Tap on the warning
第 1 步：点击警告
step 2: In the yellow window click on the stack trace option in top right
第 2 步：在黄色窗口中单击右上角的堆栈跟踪选项
step 3: Find the path where the warning has occured,ex:C:\Users\username\projectname\node_modules\react\cjs\react.development.js
第三步：找到出现警告的路径，例如：C:\Users\username\projectname\node_modules\react\cjs\react.development.js
step 4: Open the path in editor
第 4 步：在编辑器中打开路径
step 5: Find the key word isMounted under the deprecated api's and delete the deprecated function and warning related under it.
第五步：在已弃用的api下找到关键字isMounted，删除其下的弃用函数和相关警告。
step 6: Save and reload your app!!thats it
第 6 步：保存并重新加载您的应用程序！！就是这样
