reactjs - 使用 react 钩子(Hook)过滤数据

Question

嘿伙计们，我已经学习了几个星期了，所以请对我放轻松=)。当我使用虚拟数据时，过滤器功能起作用并在类别中显示正确的产品。我使用 django 构建了后端 api，现在我的过滤器功能不再起作用。它确实会过滤，但在按下不同的过滤器按钮后数据会完全消失。任何人都可以帮忙吗？

import React, { useState, useEffect } from "react";
import axios from "axios";
import ButtonList from "../components/ButtonList";
import ProductList from "../components/ProductList";

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

  useEffect(() => {
    const fetchProduct = async () => {
      const { data } = await axios.get("/api/products/");
      setProducts(data);
    };
    fetchProduct();
  }, []);

  const filter = (button) => {
    if (button === "All") {
      setProducts(products);
      return;
    }

    const filteredData = products.filter(
      (products) => products.category === button
    );
    setProducts(filteredData);
  };

  return (
    <div>
      <ButtonList onClickFilter={filter} />
      <ProductList product={products} />
    </div>
  );
};
export default ProductPage;

Answer 1

您正在丢失 products 的原始列表作为您的设置过滤其中的数据。所以，目前没有办法得到原版products回列表。
要修复它，您可以设置 search处于某种状态并使用它来过滤产品。这样，原始数据始终存在于 products 中但过滤后的数据用于呈现列表:

const ProductPage = () => {
  const [products, setProducts] = useState([])
  const [search, setSearch] = useState('ALL') // New State for search

  // ...

  const filter = (button) => {
    setSearch(button)
  }

  return (
    <div>
      <ButtonList onClickFilter={filter} />
      <ProductList
        product={products.filter((p) => search === 'ALL' || p.category === search)}
      />
    </div>
  )
}