按用户输入gatsbyJS + Firebase显示已过滤产品的列表

gatsby new my-project

npm install firebase

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  // 将你的Firebase配置信息填写在这里
};

firebase.initializeApp(firebaseConfig);

export const firestore = firebase.firestore();

import React, { useEffect, useState } from 'react';
import { firestore } from '../firebase';

const ProductsPage = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const snapshot = await firestore.collection('products').get();
      const productsData = snapshot.docs.map(doc => doc.data());
      setProducts(productsData);
    };

    fetchProducts();
  }, []);

  return (
    <div>
      <h1>产品列表</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductsPage;

import React, { useEffect, useState } from 'react';
import { firestore } from '../firebase';

const ProductsPage = () => {
  const [products, setProducts] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]);
  const [filter, setFilter] = useState('');

  useEffect(() => {
    const fetchProducts = async () => {
      const snapshot = await firestore.collection('products').get();
      const productsData = snapshot.docs.map(doc => doc.data());
      setProducts(productsData);
    };

    fetchProducts();
  }, []);

  useEffect(() => {
    const filtered = products.filter(product =>
      product.name.toLowerCase().includes(filter.toLowerCase())
    );
    setFilteredProducts(filtered);
  }, [products, filter]);

  const handleFilterChange = e => {
    setFilter(e.target.value);
  };

  return (
    <div>
      <h1>产品列表</h1>
      <input type="text" value={filter} onChange={handleFilterChange} placeholder="过滤产品" />
      <ul>
        {filteredProducts.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductsPage;