使用反应钩子过滤数据答案

【问题标题】：Filtering data using react hooks使用反应钩子过滤数据
【发布时间】：2021-06-29 01:25:49
【问题描述】：

嘿伙计们，我已经学习了几个星期了 react，所以请放轻松 =)。当我使用虚拟数据时，过滤器功能起作用并在类别中显示正确的产品。我使用 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;

【问题讨论】：

标签： reactjs database filter react-hooks

【解决方案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>
  )
}

【讨论】：

你的英雄。谢谢！

【解决方案2】：

现在，在过滤之后，您将永久丢失完整的products 数组信息，因为它只存在于setProducts 将基本上覆盖的有状态products 变量中。添加另一个状态，一个包含完整产品的状态，然后过滤掉 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>
  );
};

【讨论】：

感谢您的回复，我会尝试更好地理解这个概念。