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

Question

我目前正在一家在线商店工作，该商店根据某些标准（例如尺寸、库存、性别等）过滤产品。虽然我已经能够在一定程度上让它发挥作用。我的程序目前按尺寸、性别、按价格排序等进行过滤。但是，我无法按品牌过滤。出于某种原因，一旦我点击该品牌，我就可以过滤一次该功能，但是，一旦我点击另一个品牌，该特定品牌的过滤器就不会运行。这是代码沙箱的链接：https://codesandbox.io/s/mystifying-roentgen-7mp0t我目前坚持按品牌过滤，我尝试通过检查品牌是否包含在项目中并使用 localeCompare() 将过滤结果与点击项目的状态进行比较。这是代码沙箱的链接：https://codesandbox.io/s/mystifying-roentgen-7mp0tcreateCheckboxes = () => 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];