如何修复React结合Firebase数据的搜索筛选器清空后不恢复列表的问题

问题根因 #

• 你直接修改了存储全量商品数据的productos状态：每次执行搜索筛选后，setProductos会把原有全量数据覆盖为筛选结果，当你清空搜索框时，已经没有原始全量数据可以恢复展示。
• 代码存在低级错误：const limite = Productos.length这里的Productos是组件函数本身，取到的是函数的参数长度，不是商品数组的长度，会导致遍历逻辑异常。

修复方案 #

我们新增两个状态：一个专门存储从Firebase拉取的全量原始数据，一个存储搜索关键字，渲染时直接根据关键字对全量数据做过滤，不修改原始数据源：

import { useState, useEffect } from "react"; // 原代码漏引这两个Hook，补上
import { db } from "../firebase";
import { Link } from "react-router-dom";
import "../App.css";

const Productos = () => {
  // allProducts 存储全量原始商品数据，不随搜索修改
  const [allProducts, setAllProducts] = useState([]);
  // searchKey 存储搜索框输入的关键字
  const [searchKey, setSearchKey] = useState("");

  const getLinks = async () => {
    db.collection("links").onSnapshot((querySnapshot) => {
      const docs = [];
      querySnapshot.forEach((doc) => {
        docs.push({ ...doc.data(), id: doc.id });
      });
      setAllProducts(docs); // 全量数据存到allProducts
    });
  };

  const handelSearch = (e) => {
    // 搜索框输入直接更新关键字即可，不需要做过滤逻辑
    setSearchKey(e.target.value.toLowerCase());
  };

  useEffect(() => {
    getLinks();
  }, []);

  // 渲染前根据搜索关键字过滤商品
  const filteredProducts = allProducts.filter(item => 
    item.description.toLowerCase().includes(searchKey)
  );

  return (
    <>
      <input
        type="text"
        placeholder="Buscar"
        className="search"
        onChange={handelSearch}
        name="busqueda"
      />
      <div className="productos" name="c" id="c">
        <div className="grid-prod">
          {/* 渲染过滤后的结果 */}
          {filteredProducts.map((link) => (
            <div itemID={link} className="card mb-1" key={link.id}>
              <div className="card-body">
                <div className="d-flex justify-content-between">
                  <div className="contenedor-img">
                    <img
                      className="img-producto"
                      alt="producto"
                      src={link.img}
                    ></img>
                  </div>
                </div>
                <h4 className="text-secondary titulo">{link.titulo}</h4>
                <h1 className="text-secondary titulo">{link.categoria}</h1>
                <Link to={"/" + link.url} rel="noopener noreferrer">
                  <button className="btn-prod">Ver producto</button>
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default Productos;

修改后搜索关键字为空时，filteredProducts会自动返回全量数据，不需要额外处理清空搜索的逻辑，同时原始全量数据一直保留，Firebase有数据更新也会自动同步。

内容的提问来源于stack exchange，提问作者jeronimo