Firebase Firestore 读取操作非常高

Question

所以基本上我使用 react 和 firebase firestore 为后端制作了一个 CRUD 应用程序。 我的写和删除操作都很好，没有问题。

但是我的读取操作有问题。

我的网站正在使用 useEffect 从 firebase 的集合中获取所有文档。所以这只在第一次安装时运行（当我的网络第一次加载时）以及当我在执行删除和创建操作时更改“用户”值时运行

这是我的代码：

useEffect(() => {
    const getUsers = async () => {
      const querySnapshot = await getDocs(collection(db, "cobadata"));
      setUsers(querySnapshot.docs.map((doc)=> ({...doc.data(), id: doc.id})))
    };
    getUsers();
  }, [users]);

我知道有什么问题，但是当我测试网络时，我得到了一个非常高的读取操作，就像我在我的网站上所做的每一个读取操作一样，它在 firebase 中得到了一百次操作。我可以在我的 firebase 控制台中看到这一点，当我在我的 firebase 控制台中使用网络时，就像 5 分钟一样，读取操作达到 20k

谁能帮我解决这个问题，谢谢！

Answer 1

你没有在这里展示你所有的代码，所以我需要做一些猜测。

您的useEffect 有一个依赖数组，现在设置为[users]。这意味着每次变量 users 更改时，您的 useEffect 都会重新渲染。在您的useEffect 中，然后通过setUsers 函数为users 设置一个新值。即使您从 firebase 返回的关于当前用户的值相同，每次读取数据时仍会创建一个新数组。 (querySnapshot.docs.map((doc)=> ({...doc.data(), id: doc.id})))。 React 只进行了浅层比较，这意味着对象引用已更改，因此 users 在每次渲染时都不同。

首先，您需要决定何时运行 useEffect 以及应该触发它的内容。如果变量users 的更改不是检查的正确位置，那么我将从依赖数组中删除users。

一种解决方案可能是将效果中的功能移动到它自己的功能中，并将其包装在useCallbac 中。然后，您可以在初始加载时从“useEffect”调用此函数，然后在删除或创建用户时简单地加载效果。像这样的。

const getUsers = useCallback(async () => {
        const querySnapshot = await getDocs(collection(db, "cobadata"));
        setUsers(querySnapshot.docs.map((doc)=> ({...doc.data(), id: doc.id}))) 
    }, [collection])
    
    useEffect(() => {
        getUsers()
    }, [getUsers]);

    const createUser = () => {
        ...
        getUsers()
    }

    const deleteUser = () => {
        ...
        getUsers()
    }

（PS！我建议将 eslint-plugin-react-hooks 添加到您的 eslint-config 中。如果您的钩子使用错误，这会给您一些警告）