javascript - 应用多个过滤器 react

Question

我有 2 个按钮，单击它们时应按 novelty 或 offer 进行过滤，我能够做到这一点，以便在单击 novelty 时将按此进行过滤，但我我无法做到，如果两者都被点击，它将同时按 novelty 和 offer

进行过滤

我怎样才能让它在点击 novelty 和 offer 时都按这两者进行过滤？

https://www.webpackbin.com/bins/-KpVGNEN7ZuKAFODxuER

import React from 'react'

export default class extends React.Component {
  constructor() {
    super()

    this.state = {
      products: [
        { id: 1, novelty: true, offer: false, name: 'test1' },
        { id: 2, novelty: true, offer: true, name: 'test2' },
        { id: 3, novelty: false, offer: true, name: 'test3' } 
        ],
      display: 'all',
      filters: [
        {novelty:'true'},
        {offer: 'true'}
      ]
    }
  }

  setCategory (category) {
    this.setState({
      display: category 
    });
  }

 render() {
   return(
   <div>
      <button onClick={()=>this.setCategory(true)}>Akce</button>
      <button onClick={()=>this.setCategory(true)}>Offer</button>
           {
      this.state.products.filter( product => 
       products.offer === this.state.display ||
        this.state.display==='all')
        .map(product =>
         <div>{product.name}</div>
           )
            }
   </div>
    )
  }
}

Answer 1

这是我想出的最终版本:

import React from 'react'

export default class extends React.Component {
  constructor() {
    super()

    this.state = {
      products: [
        { id: 1, novelty: true, offer: false, name: 'test1' },
        { id: 2, novelty: true, offer: true, name: 'test2' },
        { id: 3, novelty: false, offer: true, name: 'test3' } 
        ],
      filters: {
        novelty: true,
        offer: true
      }
    }
  }

  setCategory (category) {
    this.setState((state) => ({
      filters: Object.assign({}, state.filters, { [category]: !state.filters[category] })
    }));
  }

 render() {
   console.log(this.state.filters)
   return(
   <div>
      <button onClick={()=>this.setCategory('novelty')}>Akce</button>
      <button onClick={()=>this.setCategory('offer')}>Offer</button>
           { this.state.products
                       .filter(product => product.novelty === this.state.filters.novelty || product.offer === this.state.filters.offer)
                       .map(product =>
             <div key={product.id}>{product.name}</div>
           )}
   </div>
    )
  }
}

https://www.webpackbin.com/bins/-KpVHqfkjeraq6pGvHij

一些事情:

• 在您的情况下使用 bool 值而不是字符串更合适。 (true 而不是 'true')。
• display: 'all' 不是您的用例所必需的。如果需要，您可以根据过滤器计算此值。
• setCategory 接收要设置为参数的类别。
• 我会将 setCategory 重命名为 setFilter

此外，我正在使用 setState 的异步版本。这允许你提交一个函数。

this.setState((state) => ({
      filters: Object.assign({}, state.filters, { [category]: !state.filters[category] })
}));

我在这里使用 Object.assign 创建一个新对象。我用 state.filters 填充他，最后我更新了你想要的过滤器。category 要么是 novelty 要么是 offer 多亏了我使用的是 [category] 的简写版本.

最后，我还更新了您的 filter 函数，以根据 filter.novelty 或 product 检查 product.novelty .offer 与 filter.offer