Javascript 如何将过滤器组件应用于我的产品

你好

我想将我的过滤组件应用于我的产品。因此，当用户单击“选择选项”时，他可以选择尺寸，并且只有选定尺寸的产品才会显示在屏幕上。我创造了逻辑，但我只是不知道如何应用它

代码筛选器操作：

const Filterproducts = (products,size) => (dispatch) => {
    return dispatch({
        type:FILTER_PRODUCTS_BY_SIZE,
        payload: {
            size:size,
            items:size === ''? products: products.filter(a=> a.availableSizes.indexOf(size.toUpperCase())>= 0)
        }
    })
}

代码过滤器导出器：

function producListReducer(state = {products: [], filteredItems: [], size: ''}, action){
    
    switch (action.type){
        // case is like the if statement
        //getting product
        case PRODUCT_LIST_REQUEST:
            return{loading: true};
            // when products are loaded
        case PRODUCT_LIST_SUCCESS:
            return{loading:false, products: action.payload};
            //when err occurs
        case PRODUCT_LIST_FAIL:
            return{loading: false, error: action.payload};
        case FILTER_PRODUCTS_BY_SIZE:
                return{...state, filteredItems: action.payload.products, size: action.payload.size}
        default:
                return state
    }
}

代码过滤器组件：

import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Filterproducts} from '../../actions/productActions'

class Filter extends Component {
    constructor(){
        super()
        
        this.state = {

        }
    }

  
    render(){
        return(
            
            <div className="filter">

                <label>
                    Order:
                    <select>
                        <option value="lowest">Lowest to Highest</option>
                        <option value="highest">Highest to Lowest</option>
                    </select>
                </label>
            <label>
            Size:
            <select 
            className="size"
            onChange={(e)=> this.props.Filterproducts(this.props.products, e.target.value)}
            >
            <option value="">ALL</option>
            <option value="XS">XS</option>
            <option value="S">S</option>
            <option value="M">M</option>
            <option value="L">L</option>
            <option value="XL">XL</option>

            </select>
            </label>
          
            </div>
        )
    }
}

const mapStateToProps = state => ({
    products: state.products.items,
    size: state.products.size
})
export default connect(mapStateToProps,{Filterproducts})(Filter)

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../../actions/productActions”导入{Filterproducts}
类过滤器扩展组件{
构造函数（）{
超级（）
此.state={
}
}
render（）{
返回(
订单：
从最低到最高
从高到低
尺寸：
this.props.Filterproducts（this.props.products，e.target.value）}
>
全部的
XS
s
M
L
特大号
)
}
}
常量mapStateToProps=状态=>({
产品：state.products.items，
尺码：state.products.size
})
导出默认连接（MapStateTops，{Filterproducts}）（筛选器）

以下是一个示例。假设产品有名称

const Filterproducts = (size) => (dispatch) => {
    return dispatch({
        type:FILTER_PRODUCTS_BY_SIZE,
        payload: {
            size,
        }
    })
}

---

---

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../../actions/productActions”导入{Filterproducts}
类过滤器扩展组件{
render（）{
返回(
订单：
从最低到最高
从高到低
尺寸：
this.props.Filterproducts（e.target.value）}
>
全部的
XS
s
M
L
特大号
{filteredItem.length&&filteredItems.map（产品=>{
返回（{product.name}
}
)
}
}
常量mapStateToProps=状态=>({
filteredItems:state.filteredItems，
})
导出默认连接（MapStateTops，{Filterproducts}）（筛选器）

在“按大小筛选产品”中，您需要使用filteredItems:action.payload.items，因为您发送的项目不是来自action的产品。您必须在MapStateTrops中映射filteredItems。之后，您可以在map中使用filteredItems.map来显示您的产品。@deepak如何在mapstateprops中映射它？它给出了一个直接错误×TypeError：无法读取未定义有效负载名称的属性“items”，根据给定代码是否正确？

 function producListReducer(state = {products: [], filteredItems: [], size: ''}, action){
    
    switch (action.type){
        // case is like the if statement
        //getting product
        case PRODUCT_LIST_REQUEST:
            return{loading: true};
            // when products are loaded
        case PRODUCT_LIST_SUCCESS:
            return{loading:false, products: action.payload};
            //when err occurs
        case PRODUCT_LIST_FAIL:
            return{loading: false, error: action.payload};
        case FILTER_PRODUCTS_BY_SIZE:
                 const { size } = action.payload
                 const filterProduct = size === ''? state.products: state.products.filter(a=> a.availableSizes.indexOf(size.toUpperCase())>= 0)
                return{...state, filteredItems:[...filterProduct], size: action.payload.size}
        default:
                return state
    }
}

import React, { Component } from 'react'
                import {connect} from 'react-redux'
                import {Filterproducts} from '../../actions/productActions'
                
                class Filter extends Component {
                    render(){
                        return(
                            
                            <div className="filter">
                
                                <label>
                                    Order:
                                    <select>
                                        <option value="lowest">Lowest to Highest</option>
                                        <option value="highest">Highest to Lowest</option>
                                    </select>
                                </label>
                            <label>
                            Size:
                            <select 
                            className="size"
                            onChange={(e)=> this.props.Filterproducts(e.target.value)}
                            >
                            <option value="">ALL</option>
                            <option value="XS">XS</option>
                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                
                            </select>
                            </label>
                            { filteredItem.length && filteredItems.map( product => {
                                 return (<> {product.name} </>
                            }
                            </div>
                        )
                    }
                }
                
                const mapStateToProps = state => ({
                    filteredItems: state.filteredItems,
                })
                export default connect(mapStateToProps,{Filterproducts})(Filter)