Question

此代码的目的是按颜色过滤项目。过滤后的值未更新为与颜色匹配的项目。假设filterData函数可以对产品进行过滤，然后对数组中的颜色进行过滤，然后返回该颜色的产品

state = {
    filtered:this.props.products,
    color:[],
    size:'all',
    price:'all',
    type:'all'
}

change = (e) => {
    let value = e.target.value;
    let name = e.target.name;
    this.setState({
        [name]:[...this.state.color,value]
    }, () => {
        this.filterData();
    })
}

filterData = () => {
    if (this.state.color) {
        var newData = this.props.products.filter(product => {
            return this.state.color.filter(c => {
                return c === product.colors 
            })
        })
    }
    this.setState({
        filtered:newData
    })
}

render() {
    let list = this.state.filtered.map(product => {
        return(
            <div className="product" key={product.product_id}>
                <Link to = {{ pathname: '/'+product.product_id}}>
                    <img className="product_image"src={product.image[0]} />
                </Link>
                <div className="product_info">
                    <p className="product_title">{product.title}</p>
                    <p className="product_price">${product.price}.00</p>
                </div>
            </div>
        )
    })

Answer 1

尝试更改过滤器功能，如下所示：

filterData = () => {
  var newData = this.propts.products;

  if(this.state.color) {
      newData = this.props.products.filter(product => {
        return product.colors.some(color => {
          return this.state.color.includes(color);
        });
      })
  }

  this.setState({
      filtered:newData
  })
}

除了直接解决比较数组的问题外，仅当产品的至少一种颜色在用户选择的颜色列表中时，此函数才返回true。

当然，您必须考虑以下事实：newData仅在设置this.state.color时定义，因此您应该对此做一些事情（我通过指定默认值对其进行了修正）。

更新：顺便说一句，您的代码太糟糕了，您应该花一些时间来相应地格式化代码，以使其易于阅读。

Answer 2

我认为这可以简化。如果不查看颜色数组中某项的实际数据结构以及产品的外观，就很难确定。这个新的filterData方法应该修复它。这就是我在想像的数据：

this.state.color = ["red","blue","green","purple", ...];

this.state.products = [
    {name: "product1", price: 10, color: "orange"},
    {name: "product2", price: 20, color: "red"},
    ...
]

您还可以利用某些ES6功能来使代码更整洁，更具可读性。一个大问题是您在“ if（this.state.color）”块中定义了newData，因此当它到达“ this.setState”时将始终是未定义的。

首先，您应该过滤产品，并且过滤条件是产品颜色是否在颜色阵列内。您可以使用“ indexOf”并检查索引是否大于-1来实现此目的。 -1表示它不存在于数组中，更大的是颜色的索引位置，表示它存在。

filterData = () => {
    if(this.state.color){
        let { color } = this.state;
        let { products } = this.props;
        let newData = products.filter(product => {
            if(color.indexOf(product.colors) > -1)
                return product;
        }
        this.setState({filtered: newData})
    }
}

根据我在上面提供的示例数据，将仅返回product2，因为它的颜色（“红色”）包含在颜色数组中。希望这会有所帮助！

嵌套过滤器数组方法

2 个答案: