如何过滤大型 Firestore 列表的数据？

Question

在以下代码中，我从 Firestore 数据库中获取用户并将它们传递给视图。视图有一个输入字段，用于在您输入时搜索用户并过滤结果：

import React, { useState, useEffect } from "react";
import axios from "axios";

export default function App() {
  const [users, setUsers] = useState([]);
  const [search, setSearch] = useState("");

  useEffect(() => {
    firebase
    .firestore()
    .collection('users')
    .onSnapshot((fetchedUsers) => {
       setUsers(fetchedUsers.docs.map((user) => user.data()));
    }).catch((error) => {
       // error handling
    });
  }, [setUsers]);

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search User..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        style={{ marginBottom: "30px" }}
      />
      {users
        .filter((e) => e.name.toLowerCase().includes(search.toLowerCase()))
        .map((user) => (
          <div>{user.name}</div>
        ))}
    </div>
  );
}

我正在从 Firestore 中获取用户，并且每天都会添加 1000 多个用户。因此，对用户列表的每次访问都算作 Firestore 读取次数。

如何减少阅读量，而不会失去在输入时搜索用户的可能性？我正面临这个问题，因为当我添加分页或仅获取最近的 50 个用户时，我没有可用于过滤的完整列表。

Answer 1

在查看 firestore 文档时，我发现它具有查询支持。

https://firebase.google.com/docs/firestore/query-data/queries#simple_queries

如果我的理解是正确的，你需要过滤掉结果，这可以委托给firestore。

要减少对 Firestore 的调用次数，您可以实现 debounce。

Answer 2

通过阅读您的问题，您似乎希望在用户输入输入元素时限制对您的 Firestore 的调用。为此，我将使用useEffect 中的setTimeout 函数来延迟调用firestore，直到用户停止输入后500 milliseconds。 useEffect 函数的变化如下。

实现超时功能后，您需要使用where 功能过滤您的数据。此函数接受三个参数([search for], '[operator]', [what to match])，因此，在您的情况下，您将拥有('name', '==', search)。查看下面的代码，and check out the documentation for firestore queries。

useEffect(() => {

 // Adding the search variable to the array of the second useEffect argument
 // will cause this useEffect to run on every change to the search variable, which
 // is what we want since we do not know when the user will stop typing.

 // Also to filter user's, use the 'where' function, which has three parameters.

 const timeout = setTimeout(() => {
  firebase
    .firestore()
    .collection('users')
    .where('name', 'in', search)
    .onSnapshot((fetchedUsers) => {
       setUsers(fetchedUsers.docs.map((user) => user.data()));
    .catch(err => {
      // catch error
    });
 }, 500);

 // Clean up timeout
 return () => clearTimeout(timeout)

}, [search, setUsers]);