web-dev-qa-db-ja.com

警告：isMounted（...）はプレーンなJavaScriptクラスでは非推奨です

反応ナビゲーションを使用して2つの画面を実装しています。しかし、2番目のページに移動すると、次の警告が表示されます。

警告：isMounted（...）はプレーンなJavaScriptクラスでは非推奨です。代わりに、componentWillUnmountでサブスクリプションと保留中の要求をクリーンアップして、メモリリークを防止してください。

バージョン：

  • 反応：16.3.1
  • 反応ネイティブ：0.55.2
  • 反応ナビゲーション：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>
        )
    }
}

ここに何が欠けていますか？

javascriptreactjsreact-nativereact-navigation
28
Javascript Hupp Technologies

これは、最新のReactナビゲーションおよびReact Nativeの問題です。沈黙させるために追加：

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

今後数週間以内にReact Navigationで修正される予定です。

58
James

これは実際にはReact-Nativeの問題です

ここで修正が利用可能になるのを待って確認できます： https://github.com/facebook/react-native/issues/18868

または、その間、提案されたような警告を非表示にすることができます。

7
Erwan

index.jsで次のステートメントを使用します。

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

Node_modulesを調べたreact-navigationはisMountedを使用していないため、これはreact-navigationからではありません。React-Native内のどこかから来て、@ Romsunで使用したのと同じハックも行いました

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

反応ナビゲーションの問題は解決されました。 こちら

彼らはそれが反応ネイティブの内部のどこかに問題があると述べています

0
Pavel Krčmář

これは当面この問題のためにしたことです：

ステップ1：警告をタップします

ステップ2：黄色のウィンドウで、右上のスタックトレースオプションをクリックします

ステップ3：警告が発生したパスを見つけます。例：C：\ Users\username\projectname\node_modules\react\cjs\react.development.js

ステップ4：エディターでパスを開く

ステップ5：非推奨APIの下にあるキーWord isMountedを見つけ、それに関連する非推奨機能と警告を削除します。

ステップ6：アプリを保存してリロードする!!

0
Swasam

RN開発にEXPOを使用している場合、この問題はexpo 27.0.2で修正されました。

https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/12 を参照してください

0
Pavel Krčmář

上記の答えは私にはうまくいきませんでしたが、次の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/1

他の回答のいくつかが述べたように、それはreact-nativeの問題なので、すぐに修正され、Expoの次のバージョンで修正されることを願っています。

0
Briano

次の解決策は私のために機能します：

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

このメッセージを無視することは、優れた開発者にとっては間違った方法です。この問題を取り除くと、メモリリークが減少します。

0
Gajarajan

Expoクライアントを使用している場合は、この警告を修正する[email protected]にバージョンを更新してください。 。 。

0
Manoj