React组件加载Firebase Firestore文档时出现更新警告问题

兄弟，这个警告我太懂这个坑了！本质原因就是你的Firestore异步请求还在处理时，组件可能已经被卸载了（比如用户跳去别的页面、组件被移除），这时候你再调用setState更新状态，React就会抛出警告——毕竟组件都不在DOM里了，根本没法更新啊！

给你一套稳的解决方案，核心就是跟踪组件的挂载状态，确保只有组件还处于挂载状态时才去更新状态：

步骤1：添加挂载状态变量 #

在组件类里定义一个_isMounted变量，用来标记组件是否处于挂载状态（用类字段语法或者构造函数都可以）：

class YourComponent extends React.Component {
  // 类字段语法，无需构造函数
  _isMounted = false;

  // 或者用构造函数写法：
  // constructor(props) {
  //   super(props);
  //   this._isMounted = false;
  // }
}

步骤2：在生命周期钩子中更新挂载状态 #

在componentDidMount里把_isMounted设为true（组件挂载完成），在componentWillUnmount里设为false（组件即将卸载），然后在Firestore的回调里先检查状态再调用setState：

componentDidMount() {
  this._isMounted = true;
  
  // 发起Firestore请求
  firebase.firestore().collection('yourCollection').doc('targetDoc')
    .get()
    .then(doc => {
      // 先确认组件还挂载着，再更新状态
      if (this._isMounted) {
        this.setState({ data: doc.data() });
      }
    })
    .catch(error => {
      // 错误处理里也别忘了检查
      if (this._isMounted) {
        console.error('获取数据失败:', error);
      }
    });
}

componentWillUnmount() {
  // 组件卸载时标记状态
  this._isMounted = false;
}

额外补充：函数组件的处理方式 #

如果你用的是React Hooks函数组件，就用useRef跟踪挂载状态，配合useEffect的清理函数：

import { useState, useEffect, useRef } from 'react';

function YourComponent() {
  const [data, setData] = useState(null);
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
    
    firebase.firestore().collection('yourCollection').doc('targetDoc')
      .get()
      .then(doc => {
        if (isMounted.current) {
          setData(doc.data());
        }
      });

    // 组件卸载时执行的清理函数
    return () => {
      isMounted.current = false;
    };
  }, []);

  return (
    <div>{data ? <div>{JSON.stringify(data)}</div> : <div>No Items</div>}</div>
  );
}

这样修改后，当组件卸载后，即使Firestore请求完成，也不会再执行setState，那个烦人的警告自然就消失啦！

内容的提问来源于stack exchange，提问作者beaver559