reactjs - Expo React 警告 : Can't perform a React state update on an unmounted component. 这是一个空操作，但它表明您的应用程序中存在内存泄漏

Question

我是 native react 的新手，并且正在关注有关如何与 firebase auth 连接的媒体教程。一切似乎都正常，但我不断收到以下警告:
警告:无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。
我几乎完全按照教程中所说的去做，并尝试了其他一些方法来修复它，但似乎没有任何效果。这是它指向错误的代码:

    let currentUserUID = firebase.auth().currentUser.uid;

    const [firstName, setFirstName] = useState('');

    useEffect(() => { 
        getUserInfo();
      })

      async function getUserInfo(){
        try {
          let doc = await firebase
            .firestore()
            .collection('users')
            .doc(currentUserUID)
            .get();
  
          if (!doc.exists){
            Alert.alert('No user data found!')
          } else {
            let dataObj = doc.data();
            setFirstName(dataObj.firstName)
          }
        } catch (err){
        Alert.alert('There is an error.', err.message)
        }
      }

如果有人能帮我解决这个问题并解释到底出了什么问题，那就太好了。
这是link到我正在关注的教程:

Answer 1

这里的问题是您可能在卸载组件后将状态更新排入队列。由于您是直接异步访问 Firestore，因此您可以使用 React ref 来跟踪在将更新加入队列之前组件是否仍处于挂载状态。

const isMountedRef = React.ref(null);

useEffect(() => {
  isMountedRef.current = true;               // set true when mounted
  return () => isMountedRef.current = false; // clear when unmounted
}, []);

useEffect(() => {
  async function getUserInfo(){
    try {
      let doc = await firebase
        .firestore()
        .collection('users')
        .doc(currentUserUID)
        .get();

      if (!doc.exists){
        Alert.alert('No user data found!')
      } else {
        let dataObj = doc.data();
        if (isMountedRef.current) { // <-- check if still mounted
          setFirstName(dataObj.firstName);
        }
      }
    } catch (err){
      Alert.alert('There is an error.', err.message)
    }
  }
  getUserInfo();
}, []); // <-- include dependency array, empty to run once when mounting