在 React-Native 中关闭 useEffect 内存泄漏

Question

从我的 expo 应用程序中的一组地图导航到另一组时，如果我在地图加载完成之前导航，我经常会收到此错误：

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请取消 %s 中的所有订阅和异步任务。%s，一个 useEffect 清理函数

如何解决这个内存泄漏？

下面是我的代码：

function MapsScreen({navigation}) { 

const [user_latitude, setUserLatitude] = useState(0)
const [user_longitude, setUserLongitude] = useState(0)
const [position_error, setPositionError] = useState(null)
   
useEffect(() => {
  navigator.geolocation.getCurrentPosition(position => { 
    setUserLatitude(position.coords.latitude);
    setUserLongitude(position.coords.longitude);
    setPositionError(null);
  }, 

  error => setPositionError(error.message),
  {enableHighAccuracy: true, timeout: 20000, maximumAge: 2000}
  ); 
});

Answer 1

原因： You will get this warning when your component is unmounted from the memory and some async task is in the process like you make a network call and tries to leave the screen before resolving the promise.

解决方案：To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

问题的解决方案：查看代码时，当组件尝试卸载时，您正在更改状态，您必须使用带有 useEffect 挂钩的清理功能，添加一个标志在setUserLatitude、setUserLongitude、setPositionError之前确保组件没有从内存中卸载

function MapsScreen({navigation}) { 

const [user_latitude, setUserLatitude] = useState(0)
const [user_longitude, setUserLongitude] = useState(0)
const [position_error, setPositionError] = useState(null)
   
useEffect(() => {
  let mounted = true // Add this 
  navigator.geolocation.getCurrentPosition(position => { 
   if(mounted){ // Add this
    setUserLatitude(position.coords.latitude);
    setUserLongitude(position.coords.longitude);
    setPositionError(null);
    }
  }, 

  error => setPositionError(error.message),
  {enableHighAccuracy: true, timeout: 20000, maximumAge: 2000}
  ); 

 return () => {
  mounted = false // add this
 }
}, []);

阅读更多关于它的信息Clean up function

Answer 2

我同意 Waheed 的回答， 顺便说一句，如果您的代码中已经有 react-navigation v5.x 会更容易， 很简单，只需使用useFocusEffect 方法，该函数仅在屏幕聚焦时执行。我举例说明使用isActive 标志检查器添加第二次检查。

import React, { useEffect, useState } from 'react'
import { useFocusEffect } from '@react-navigation/native'

function MapsScreen({ navigation }) {
  const [user_latitude, setUserLatitude] = useState(0)
  const [user_longitude, setUserLongitude] = useState(0)
  const [position_error, setPositionError] = useState(null)

  useFocusEffect(
    React.useCallback(() => {
      let isActive = true

      const fetchGeoPositon = () => {
        navigator.geolocation.getCurrentPosition(
          position => {
            if (isActive) {
              setUserLatitude(position.coords.latitude)
              setUserLongitude(position.coords.longitude)
              setPositionError(null)
            }
          },

          error => isActive && setPositionError(error.message),
          { enableHighAccuracy: true, timeout: 20000, maximumAge: 2000 }
        )
      }

      fetchGeoPositon()

      return () => {
        isActive = false
      }
    }, [])
  )
}

https://reactnavigation.org/docs/use-focus-effect/