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 基本上会覆盖的有状态 setProducts 变量中。添加另一个状态，一个包含完整产品的状态，并过滤掉it。

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

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

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

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

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

Answer 2

您正在丢失 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>
  )
}

使用反应钩子过滤数据

2 个答案: