Предупреждение: невозможно выполнить обновление состояния React для несмонтированного компонента в SceneView (созданный Pager)

Я получил следующую ошибку, чем пытался выяснить, в чем ее причина, но во всем Интернете есть просто разные ответы на похожие проблемы, но не конкретно на мою. Я пытался обновить пакеты, которые не были обновлены npm outdated. Предупреждение появляется во время обновления навигации. Кто-нибудь сталкивался с подобной проблемой?

"react-navigation": "^4.3.9",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"expo": "^38.0.0",
 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method, 
    in SceneView (created by Pager)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (created by PanGestureHandler)
    in PanGestureHandler (created by Pager)
    in Pager (created by TabView)
    in RCTView (created by TabView)
    in TabView (created by MaterialTabView)
    in MaterialTabView (created by NavigationView)
    in NavigationView (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at StackViewLayout.tsx:888)
    in RCTView (at StackViewLayout.tsx:887)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.js:101)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at src/index.native.js:132)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (created by withOrientation)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (created by Navigator)
    in Navigator (created by KeyboardAwareNavigator)
    in KeyboardAwareNavigator (created by NavigationContainer)
    in NavigationContainer (created by SceneView)
    in SceneView (created by Drawer)
    in RCTView (created by ResourceSavingScene)
    in RCTView (created by ResourceSavingScene)
    in ResourceSavingScene (created by Drawer)
    in RCTView (at src/index.native.js:132)
    in ScreenContainer (created by Drawer)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (created by Drawer)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (created by PanGestureHandler)
    in PanGestureHandler (created by Drawer)
    in Drawer (created by DrawerView)
    in DrawerView (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (created by SwitchView)
    in SwitchView (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer (at RootNavigation.tsx:103)
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
325
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обычно это указывает на то, что обновление состояния запускается слишком поздно, когда компонент уже размонтирован. В вашем случае скорее всего после навигации.

На самом деле невозможно точно определить проблему, не зная кода. Я предполагаю, что у вас есть тайм-аут или асинхронная операция. Например. прослушиватель событий, который обновляет состояние, которое может быть запущено даже после того, как компонент был размонтирован. Решение здесь состоит в том, чтобы отменить подписку на любые прослушиватели событий и потоковые операции в вашем жизненном цикле componentWillUnmount. Или если вы используете функциональные компоненты в качестве функции возврата в вашем эффекте.

useEffect(() => {
  document.addEventListener('resize', myFunc);
  return () => document.removeEventListener('resize', myFunc);
}, [...]);

То же самое касается тайм-аутов, вы можете сохранить активный тайм-аут в объекте ref и очистить его в жизненном цикле размонтирования.

это кажется мне очень интересным. Я попробую это решение и вернусь к вам. Спасибо

x-magix 14.12.2020 14:30

хорошо, что я добился успеха с этим ответом. Спасибо

x-magix 15.12.2020 10:13

Рад это слышать :) Можешь отметить ответ как правильный? Чтобы было понятно, что на вопрос ответили.

Bitmonk 17.12.2020 15:10

Другие вопросы по теме