从 React useEffect 访问 firestore 函数而没有依赖警告答案

【问题标题】：Accessing firestore functions from React useEffect without dependency warning从 React useEffect 访问 firestore 函数而没有依赖警告
【发布时间】：2021-12-09 19:48:43
【问题描述】：

我正在使用 ReactJS 和 Google FireStore 创建一个简单的股票投资组合跟踪应用程序。如何从 useEffect 访问数据库函数而不触发警告“React Hook 缺少依赖项”？我尝试过使用useCallback，但到目前为止没有成功。还是可以忽略这些警告？

var db = firebase.firestore();
  useEffect(() => {
    //get user's cost averages from db

    if (props.userStatus) {
      db.collection("users")
        .doc(props.userStatus)
        .get()
        .then((doc) => {
          if (doc.exists) {
            if (doc.data().portfolio) {
              setCostAverages(doc.data().portfolio);
            }
          }
        });
    }
  }, [props.userStatus]);

警告消息：“React Hook useEffect 缺少依赖项 'db'

【问题讨论】：

你能分享你的package.json 吗？

标签： reactjs google-cloud-firestore

【解决方案1】：

此警告的常见解决方案是将 Firestore 实例的引用添加到 useEffect() 挂钩函数的依赖数组中。您可以查看related thread 和Github issue 了解更多详情。对于您的代码 sn-p，依赖项数组需要如下所示：

var db = firebase.firestore();
  useEffect(() => {
    //get user's cost averages from db
    //...
  }, [props.userStatus, db]);

根据文档，dependency array 应包括效果范围内使用的所有值：

如果您使用此优化，请确保数组包含组件范围内的所有值（例如 props 和 state），这些值会随时间变化并被效果器使用。否则，您的代码将引用以前渲染中的陈旧值。

最后，我找到了一个detailed guide，它深入到了这个依赖数组中。

【讨论】：