Javascript 根据选定项目的数组筛选产品-React

我在页面上列出了一系列产品，如：

{products.map((product, i) => {
  return (
    <p>{product.name}</p>
  )
})}

---

正如我所看到的，

产品

类就是这样的

class Category {
   ...
   slug?: string;
   ...
}
class Prodcut {
 categories?: Category[];
}

这是一个组件的伪实现

...
products?: Product[]; // you set the value of this from api call
filteredProducts?: Product[] = []; // the filtered products based on the selected category. you should use this variable in your template to render the produts and as when you get the products, set the value of filteredProducts = products
filters: string[] = []; // all the selected filters

filterB(): void {
    filteredProducts = this.products.filter(product => {
        var allow = false;
        for(const temp of product.categories){
            if(!allow){
               allow = this.filters.includes(temp.slug)
            }
        }
        return allow;
    });
}
...

---

filterB

函数将

filteredProducts

的值设置为当您调用它时的值

换句话说，您需要按钮作为复选框工作？@raina77现在不太清楚，我将更新问题以解决that@raina77ow更新。

setfilteredPolls

这个函数做什么？@Harkal那是个打字错误，我更新了

class Category {
   ...
   slug?: string;
   ...
}
class Prodcut {
 categories?: Category[];
}

...
products?: Product[]; // you set the value of this from api call
filteredProducts?: Product[] = []; // the filtered products based on the selected category. you should use this variable in your template to render the produts and as when you get the products, set the value of filteredProducts = products
filters: string[] = []; // all the selected filters

filterB(): void {
    filteredProducts = this.products.filter(product => {
        var allow = false;
        for(const temp of product.categories){
            if(!allow){
               allow = this.filters.includes(temp.slug)
            }
        }
        return allow;
    });
}
...