Предупреждение: isMounted (...) устарело в простых классах Javascript

Я реализую 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>
        )
    }
}

Что мне здесь не хватает?

Ответы

Ответ 1

Это проблема с последней версией React Navigation и React Native. Чтобы отключить его, добавьте:

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

Я ожидаю, что он будет исправлен в React Navigation в течение следующих нескольких недель.

Ответ 2

На самом деле это проблема, связанная с реакцией

Вы можете подождать и проверить, когда исправление доступно здесь: https://github.com/facebook/react-native/issues/18868

Или пока вы можете скрыть предупреждение, как это было предложено.

Ответ 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

проблема с реакционной навигацией теперь закрыта, вы можете посмотреть здесь

Они заявляют, что это проблема где-то внутри реагирующих

Ответ 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

Игнорирование этого сообщения является неправильным способом для хорошего разработчика. Если мы удалим эту проблему, то утечка памяти уменьшится.

Ответ 9

Ответы выше не работали для меня, но добавив следующее в index.js сделал трюк:

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

Или обновите до версии 27.0.2 которая в основном добавляет выше к Expo.js Дополнительную информацию можно найти здесь: https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10

Как некоторые другие ответы заявили, это react-native вопрос так, мы надеемся, это будет исправлено в ближайшее время там, а затем в следующей версии Expo.

Ответ 10

Это то, что я сделал для этой проблемы на данный момент:

Шаг 1: Нажмите на предупреждение

Шаг 2: В желтом окне нажмите на опцию трассировки стека в правом верхнем углу

Шаг 3. Найдите путь, в котором произошло предупреждение, например: C:\Users\имя_пользователя\имя_проекта\node_modules\react\cjs\react.development.js

Шаг 4. Откройте путь в редакторе.

Шаг 5: Найдите ключевое слово isMounted под устаревшим api и удалите устаревшую функцию и предупреждение, связанные с ней.

Шаг 6: Сохраните и перезагрузите приложение.

Ответ 11

Если вы используете клиент expo, обновите версию до [email protected], которая исправляет это предупреждение. , ,