Предупреждение: isMounted (...) устарел в простых классах Javascript
Я реализую 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.
Версии:
- реагировать: 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>
)
}
}
Что мне здесь не хватает?
Да, я обновил все 4 модуля до последней версии, но у меня это не сработало. Даже тоже попробовал понизить.
Вы пытались удалить их по одному? Кроме того, есть ли у вас другие страницы, кроме home.js и login.js?
Нет, у меня нет других страниц, хорошо, позвольте мне попробовать отрендерить домашнюю страницу без навигации.
О да, похоже, проблема с onPress = {()=> navigate('Home')}, потому что при рендеринге домашней страницы по умолчанию без навигации предупреждение исчезает.
Хорошо ... Ваша проблема может быть связана как-то с маршрутизатором, который вы выбрали тогда. Попробуйте использовать другой. Я лично использую react-native-navigation от Wix, но вы также можете использовать react-native-router-flux, если не хотите реализовывать свою навигацию изначально.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 11
Это проблема с последними версиями 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, оно, похоже, не влияет на отключение вывода в отладчике, где сообщение повторяется несколько раз в секунду.
Для меня работает следующее решение:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
Это на самом деле проблема React-Native
Вы можете подождать и проверить, когда будет доступно исправление, здесь: https://github.com/facebook/react-native/issues/18868
А пока вы можете скрыть предупреждение, как предлагается.
Согласно этой проблеме GItHub, она была исправлена в react-native v0.57.0.
Проблема с реакцией-навигацией закрыта, можете посмотреть здесь
Они заявляют, что это проблема где-то внутри react-native
Да, я смотрел, но факт в том, что предупреждение приходит, когда звонит navigate('page_name')
Это не из react-navigation, поскольку я изучал node_modules, а react-navigation не использует isMounted, он исходит откуда-то из React-Native,
Я также сделал тот же хак, который использовал @Romsun
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
Игнорировать это сообщение - неправильный путь для хорошего разработчика. Если мы устраним эту проблему, то утечка памяти уменьшится.
Ответ очень лаконичный, может быть, это должен быть комментарий? Иногда хотелось бы получить более подробную информацию. Тем не менее, спасибо, так как уменьшение утечек памяти всегда является важной целью.
@Gajarajan Да, но пока у нас нет другого решения.
Мы должны следить за обсуждением здесь
Если вы используете EXPO для разработки RN, эта проблема теперь исправлена в expo 27.0.2.
См. https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/12
Не могли бы вы включить в свой ответ часть о том, как обновить expo до последней версии? (Использование цитат) Таким образом, будущие посетители этой страницы быстрее найдут решение. Спасибо!
Для справки, это не ответ только по ссылке. В ответе говорится, что это была ошибка, и она была решена в более поздней версии Expo. Ссылка - это ссылка, подтверждающая это
Приведенные выше ответы не сработали для меня, но добавление следующего в 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.
Вот что я сделал для этой проблемы на данный момент:
Шаг 1. Нажмите на предупреждение
Шаг 2: В желтом окне нажмите на опцию трассировки стека в правом верхнем углу
Шаг 3: Найдите путь, по которому появилось предупреждение, например: C: \ Users \ username \ projectname \ node_modules \ react \ cjs \ react.development.js
Шаг 4: Откройте путь в редакторе
Шаг 5: Найдите ключевое слово isMounted под устаревшим API и удалите устаревшую функцию и предупреждение, относящиеся к нему.
Шаг 6: Сохраните и перезагрузите приложение !! Вот и все
Если вы используете клиент expo, обновите свою версию до [email protected], что устраняет это предупреждение. . .
Используйте этот оператор в index.js:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
Судя по всему, вы установили старый модуль, который, вероятно, вызывает устаревший метод
isMounted. Попробуйте удалять их по одному, пока предупреждение не исчезнет. Думаю, этоreact-navigation. Вы пробовали установить последнюю версию?