如何在ReactJs中通过搜索从Firestore过滤数据列表

Question

我正在使用Firebase-Cloud Firestore，目前，我想使用搜索输入过滤记录列表。我已经有一个记录列表，剩下的是搜索输入以过滤列表。我是Cloud Firestore的新手，因此感谢您提供任何清晰度。

例如：搜索列表中可用的名称和电子邮件。

我使用ReactJS查看了Firestore文档（https://firebase.google.com/docs/firestore/query-data/queries）和示例，但是没有太多可用。

这里是<SearchFilter/>：

import React, { Component } from 'react';
import firestore from "./Firebase";

export default class SearchFilter extends Component {
constructor(props) {
    super(props);
    this.state = {
        search: ''
    }
    this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
    this.setState({
        search: event.target.value
    })
    console.log(event.target.value);
}

searchData = e => {
    e.preventDefault();
    const usersRef = firestore.collection('Users');
    const queryName = usersRef.where('FirstName', '==', 'john');

    const userList = this.state.userList;
    const updateList = userList.filter(function(item) {
        return item.toLowerCase().search(e.target.value.toLowerCase()) !== -1;
    })
    console.log('query name', queryName);
    console.log('user list', updateList);
}

render() {
    return (
        <div>
            <form onSubmit={this.searchData}>
                <input
                    type='text'
                    placeholder='Search...'
                    onChange={this.handleChange}
                />
                <button type="submit">Search</button>
            </form>
        </div>
    )
}
}

这里是<DataList/>：

import React, { Component } from 'react';
import Pagination from "react-js-pagination";
import firestore from "./Firebase";

export default class DataList extends Component {

constructor(props) {
    super(props);
    this.state = {
        dbItems: [],
        currentPage: 1,
        itemsPerPage: 2,
        totalItemCount: 1
    }
    this.handlePageChange = this.handlePageChange.bind(this);
}

handlePageChange(pageNumber) {
    const { totalItemCount, itemsPerPage } = this.state;
    const startAt = ((pageNumber - 1) * itemsPerPage) + 1;

    this.loadItems(startAt, totalItemCount, pageNumber);
}

componentDidMount() {
    this.getItems();
}

async getItems() {
    const { currentPage, itemsPerPage } = this.state;
    const startAt = ((currentPage - 1) * itemsPerPage) + 1;
    const usersQuery = firestore.collection('Users').orderBy("FirstName");
    const snapshot = await usersQuery.get();

    this.loadItems(startAt, snapshot.size);
}

loadItems(startAt, totalItemCount, pageNumber) {
    this.nextPage(startAt).then(querySnapshot => {
        const dbItems = [];

        querySnapshot.forEach(function (doc) {
            dbItems.push({
                firstname: doc.data().FirstName,
                email: doc.data().email
            });
        });
        this.setState({
            dbItems: dbItems,
            currentPage: pageNumber,
            totalItemCount: totalItemCount
        });
    })
    .catch(function (error) {
        console.log("Error getting users: ", error);
    });
}

nextPage(startAt) {
    const { itemsPerPage } = this.state;
    var first = firestore.collection('Users')
        .orderBy('FirstName')
        .limit(startAt);

    return first.get().then(function (documentSnapshots) {
        var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];

        return firestore.collection('Users')
            .orderBy('FirstName')
            .startAt(lastVisible)
            .limit(itemsPerPage)
            .get();
    });
}

render() {
    return (
        <div>
            {this.state.dbItems.map((users, index) => {
                return (
                    <p key={index}>
                        <b>First Name:</b> {users.firstname} <br />
                        <b>Email:</b> {users.email}
                    </p>
                )
            })
            }
            <Pagination
                activePage={this.state.currentPage}
                itemsCountPerPage={this.state.itemsPerPage}
                totalItemsCount={this.state.totalItemCount}
                pageRangeDisplayed={5}
                onChange={this.handlePageChange}
            />
        </div>
    )
}
}

谢谢您的帮助！