如何通过反应动态处理大量过滤器？

Question

我目前正在一家在线商店工作，该商店根据某些标准（例如尺寸、库存、性别等）过滤产品。

虽然我已经能够在一定程度上让它发挥作用。我的程序目前按尺寸、性别、按价格排序等进行过滤。但是，我无法按品牌过滤。出于某种原因，一旦我点击该品牌，我就可以过滤一次该功能，但是，一旦我点击另一个品牌，该特定品牌的过滤器就不会运行。

这是代码沙箱的链接：

https://codesandbox.io/s/mystifying-roentgen-7mp0t

我目前坚持按品牌过滤，我尝试通过检查品牌是否包含在项目中并使用 localeCompare() 将过滤结果与点击项目的状态进行比较。

这是代码沙箱的链接：

https://codesandbox.io/s/mystifying-roentgen-7mp0t

createCheckboxes = () => available_sizes.map(this.createCheckbox);

  handleFormSubmit = event => {

    //4) this button updates the filters on the sizes, which I think I need to fix to update the brands, the price and the gender

    event.preventDefault();

    //5) right here I am storing the selected checkboxes which is what I was doing before by pushing the checkboxes

    const selectedSizes = [...this.selectedCheckboxes];

    const shallowCopy = [...this.state.filteredProducts];

    let filteredProducts = shallowCopy.filter(product =>

      selectedSizes.every(size =>

        product.stock.some(s => s.stock > 0 && s.size === size)

      )

    );

    let filteredGender = filteredProducts.filter(product => {

      return product.gender.some((item, idx, arr) => {

        return item[this.selectedGender] === false ? null : product;

      });

    });

    //***this is the function that is not currently running***//

    let filteredData = filteredGender.filter(product => {

      //console.log(product.brand.includes(this.state.activeBrand))

      //console.log(product.brand = this.state.brand)

      return product.brand.includes(this.state.activeBrand)

    });

    let sortedPrice = filteredData.sort((a, b) => {

      return this.state.sortBy === "min"

        ? a.price - b.price

        : b.price - a.price;

    });

    this.setState({

      filteredProducts: sortedPrice

    });

  };

一旦点击了一个项目，我希望能够通过这个功能按品牌进行过滤。

这是代码沙箱的链接：

https://codesandbox.io/s/mystifying-roentgen-7mp0t

Answer 1

您的应用程序中有 2 个错误：1) 第一个是@user753642 在对您的问题的评论中报告的，从 中删除这一行index.js，因为它将您brand的所有产品设置为""：console.log(product.brand = this.state.brand)2）您正在过滤，filteredProducts而不是全部products。虽然在第一次过滤品牌后filterdProducts没有其他品牌的任何项目，但在过滤另一个品牌后返回一个空集合。更改 inhandleFormSubmit中的行index.js，从：const shallowCopy = [...this.state.filteredProducts];到：const shallowCopy = [...this.state.products];