React Firebase onSnapshot为映射函数返回null

我想这是因为我 onSnapshot

已筛选 刀

父组件:

function KnifesComponent() {
  const knifeCollection = collection(db, "knives");
  const [knives, setKnives] = useState([]);
  const [count, setCount] = useState(0);

  const [filtered, setFiltered] = useState([]);
  const [activeFilter, setActiveFilter] = useState("");

  useEffect(() => {
      const sub = onSnapshot(knifeCollection, (snapshot) => {
        setKnives(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
        setFiltered(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
        const TotalSkins = snapshot.size;
        setCount(TotalSkins);
      });
      return () => {
        sub();
      }
  }, []);

  const rarities = {
    Exclusive: "Rarity_Exclusive.png",
    Ultra: "Rarity_Ultra.png",
    Premium: "Rarity_Premium.png",
    Deluxe: "Rarity_Deluxe.png",
  };  

  return (
    <div className="collection">
      <h2 className="section-heading">
        Knives <div className="count">({count})</div>
        <Filter
          skins={knives}
          setFiltered={setFiltered}
          activeFilter={activeFilter}
          setActiveFilter={setActiveFilter}
        />
      </h2>
        {filtered.map((skin) => {
          return (
            <div
              layout
              animate={{ opacity: 1 }}
              initial={{ opacity: 0 }}
              exit={{ opacity: 0 }}
              className="skin-box"
              key={skin.id}
            >
              <div className="skin-rarity">
                <Image src={require(`../../public/${rarities[skin.rarity]}`)} />
              </div>
              <h4>{skin.name}</h4>
              <div className="skin-value">
                <p>{skin.value}</p>
              </div>
            </div>
          );
        })}
      <div className="clearfix"></div>
    </div>
  );
}

过滤器组件:

function Filter({ setActiveFilter, activeFilter, setFiltered, skins }) {
  useEffect(() => {
    if (activeFilter === "") {
      setFiltered("");
      return;
    }
    const filtered = skins.filter((skin) => skin.rarity.includes(activeFilter));
    console.log(filtered)
    setFiltered(filtered);
  }, [activeFilter]);

  return (
    <div className="filter-container">
      <button
        className={activeFilter === [] ? "active" : ""}
        onClick={() => setActiveFilter([])}
      >
        All
      </button>
      <button
        className={activeFilter === "Ultra" ? "active ultra" : "ultra"}
        onClick={() => setActiveFilter("Ultra")}
      >
        Ultra
      </button>
      <button
        className={
          activeFilter === "Exclusive" ? "active exclusive" : "exclusive"
        }
        onClick={() => setActiveFilter("Exclusive")}
      >
        Exclusive
      </button>
      <button
        className={activeFilter === "Premium" ? "active premium" : "premium"}
        onClick={() => setActiveFilter("Premium")}
      >
        Premium
      </button>
      <button
        className={activeFilter === "Deluxe" ? "active deluxe" : "deluxe"}
        onClick={() => setActiveFilter("Deluxe")}
      >
        Deluxe
      </button>
    </div>
  );
}