Javascript 如何过滤反应中的产物

你好

我是react的新手，我正在制作我的第一个电子商务网站。我的问题是：如何按大小筛选产品？我真的想不出逻辑。提前感谢您的回答。我也尝试过使用Redux，但没有成功，它给了我以下错误：× TypeError:无法读取未定义的属性“items”

编码产品卡：

import React,{useState,useEffect} from 'react'
import {Link} from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {Library} from '@fortawesome/fontawesome-svg-core'
import {faShoppingBasket} from '@fortawesome/free-solid-svg-icons'
import {useDispatch, useSelector} from 'react-redux'
import { listProduct, Filterproducts } from '../../actions/productActions'



function Product(props){
    //default value is an array, because we've got data in an array 
    const [qty,setQty] = useState(1)
    const productList = useSelector(state=>state.productList)
    const{products,loading,error}=productList
    const dispatch = useDispatch()
    
    // handlefilter

  

    useEffect(()=> {
        dispatch(listProduct())
       


  

    }, [])

    // handle cart adding
    const handleAddToCart = ()=> {
        props.history.push('/cart/' + props.match.params.id +  "?qty" +qty)
    }


  


   
    return( 
        // Check the loading before rendering products
        loading? <div><h1 className="load">loading...</h1></div> : 
        error?<div>{error}</div>:
           <ul className="products">
               
            {products.map(product=> (
        
            <li key={product.id} className="product"> 
             <Link to={"/product/" + product.id}><div className="img" style={{background: `url(${product.img})`, backgroundSize: 'cover'}}></div></Link>
                   {/* LOOK OUT FOR TYPOS IN ROUTIING  dont put':' after /, this only applies
                   when routing because the ": " implies for a parameter
                   In this case you can directly access product.id  */}
               <Link to={"/product/" +  product.id}><h1>{product.name}</h1></Link> 
                <p> <small>€</small>{product.price}</p>
                <div>size: {product.size}</div>
              
                {product.qty > 0 ? <div><button onClick={handleAddToCart}>Add to cart</button>  <div>{product.qty} left</div></div> : <div>out of stock</div> }   
               
             
                
                </li> 
                )
                
                )}
   
                 </ul>
                 
       
    
    )
}
export default Product

代码生成还原程序：

//two params are being accepted in the reducer func
    //* state 

import { 
    PRODUCT_DETAILS_FAIL,
    PRODUCT_DETAILS_REQUEST,
    PRODUCT_DETAILS_SUCCESS, 
    PRODUCT_LIST_FAIL, 
    PRODUCT_LIST_REQUEST, 
    PRODUCT_LIST_SUCCESS,
    FILTER_PRODUCTS_BY_SIZE,
    FILTER_PRODUCTS_BY_PRICE } from "../constants/productConstants";

    //*action
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.items, size: action.payload.size}
        default:
                return state
    }
}

function productDetailsReducer(state = {product: {}}, action){
    
    switch (action.type){
        // case is like the if statement
        //getting product
        case PRODUCT_DETAILS_REQUEST:
            return{loading: true};
            // when products are loaded
        case PRODUCT_DETAILS_SUCCESS:
            return{loading:false, product: action.payload};
            //when err occurs
        case PRODUCT_DETAILS_FAIL:
            return{loading: false, error: action.payload};
        default:
                return state
    }
}







export { producListReducer,productDetailsReducer }

---

错误消息表示您正试图访问不可抗拒对象的键“项”。在发布的代码中，您只在ProductReducer中执行此操作，因此我建议您检查返回有效负载的函数“Filterproducts”。

错误消息表示您正在尝试访问不可抗拒对象的键“项”。在发布的代码中，您只在ProductReducer中执行此操作，因此我建议您检查返回有效负载的函数“Filterproducts”。

使filter函数正常工作，但我不知道如何应用它

搜索栏组件：

import React from 'react'


// Function Searchbar 
//Looks for products 

function Search(props){

   
    return(
     <input 
     type="search"
     className="search"
     placeholder={props.placeholder}
     onChange={props.handleInput}/>
    )
}

export default Search

从“React”导入React
//功能搜索栏
//寻找产品
功能搜索（道具）{
返回(
)
}
导出默认搜索

产品组成部分：

import React from 'react'


// Function Searchbar 
//Looks for products 

function Search(props){

   
    return(
     <input 
     type="search"
     className="search"
     placeholder={props.placeholder}
     onChange={props.handleInput}/>
    )
}

export default Search

返回( //在渲染产品之前检查加载 装货？装货…： 错误？{error}：

{products.map（product=>(

{/*注意路由中的拼写错误不要在/之后加“：”，这只适用于
路由时，因为“：”表示参数
在这种情况下，您可以直接访问product.id*/}
{product.name}
欧元{产品价格}

大小：{product.size}
{product.qty>0？添加到购物车{product.qty}剩余：缺货}

)
)}

)

搜索栏在Store.js中起作用：

import React,{Component, useState} from 'react'
import Product from '../components/product'
import Nav from '../components/nav'
import Footer from '../components/footer'
import Searchbar from '../components/searchbar'
import Filter from '../components/filter'


class Store extends Component{
   
    constructor(){
        super()
        this.state = {
            products: [],
            SearchProduct: ''
        }
    }
    componentDidMount(){
        fetch('http://localhost:5000/')
        .then(res=> res.json())
        .then(data=>this.setState({products:data}) )
       
    }
   
   render(){
       let filteredProducts = this.state.products.filter((product)=> {
            return product.name.toLowerCase().includes(this.state.SearchProduct.toLowerCase())
       })
    return (
        
        <div>
        <Nav/>
        <div className="store">

           
            <div className="title">
                <h1>Store</h1>
            </div>
            <aside>
                <Searchbar 
                placeholder="Search" 
                handleInput={(e)=> {
                   
                    this.setState({SearchProduct: e.target.value})
                }
                 
                } 
                />
                
                <ul>
                    <h2>Categories</h2>
                    <li>Women</li>
                    <li>Men</li>
                    <li>Clothing</li>
                    <li>Equipment</li>
                 
                </ul>
            </aside>
           
           <Filter/>
            
            <Product filter={filteredProducts}/>
            
         
           
        </div>
        <Footer/>
        </div>
    )
   }
   
}

export default Store

import React，{Component，useState}来自“React”
从“../components/Product”导入产品
从“../components/Nav”导入导航
从“../components/Footer”导入页脚
从“../components/Searchbar”导入搜索栏
从“../components/Filter”导入筛选器
类存储扩展组件{
构造函数（）{
超级（）
此.state={
产品：[]，
搜索产品：“”
}
}
componentDidMount（）{
取（'http://localhost:5000/')
.then（res=>res.json（））
.then（data=>this.setState（{products:data}））
}
render（）{
让filteredProducts=this.state.products.filter（（产品）=>{
返回product.name.toLowerCase（）.includes（this.state.SearchProduct.toLowerCase（））
})
返回(
商场
{
this.setState（{SearchProduct:e.target.value}）
}
} 
/>

类别
女人
男人
服装
装备

)
}
}
导出默认存储

使过滤器功能正常工作，但我不知道如何应用它

搜索栏组件：

import React from 'react'


// Function Searchbar 
//Looks for products 

function Search(props){

   
    return(
     <input 
     type="search"
     className="search"
     placeholder={props.placeholder}
     onChange={props.handleInput}/>
    )
}

export default Search

从“React”导入React
//功能搜索栏
//寻找产品
功能搜索（道具）{
返回(
)
}
导出默认搜索

产品组成部分：

import React from 'react'


// Function Searchbar 
//Looks for products 

function Search(props){

   
    return(
     <input 
     type="search"
     className="search"
     placeholder={props.placeholder}
     onChange={props.handleInput}/>
    )
}

export default Search

返回( //在渲染产品之前检查加载 装货？装货…： 错误？{error}：

{products.map（product=>(

{/*注意路由中的拼写错误不要在/之后加“：”，这只适用于
路由时，因为“：”表示参数
在这种情况下，您可以直接访问product.id*/}
{product.name}
欧元{产品价格}

大小：{product.size}
{product.qty>0？添加到购物车{product.qty}剩余：缺货}

)
)}

)

搜索栏在Store.js中起作用：

import React,{Component, useState} from 'react'
import Product from '../components/product'
import Nav from '../components/nav'
import Footer from '../components/footer'
import Searchbar from '../components/searchbar'
import Filter from '../components/filter'


class Store extends Component{
   
    constructor(){
        super()
        this.state = {
            products: [],
            SearchProduct: ''
        }
    }
    componentDidMount(){
        fetch('http://localhost:5000/')
        .then(res=> res.json())
        .then(data=>this.setState({products:data}) )
       
    }
   
   render(){
       let filteredProducts = this.state.products.filter((product)=> {
            return product.name.toLowerCase().includes(this.state.SearchProduct.toLowerCase())
       })
    return (
        
        <div>
        <Nav/>
        <div className="store">

           
            <div className="title">
                <h1>Store</h1>
            </div>
            <aside>
                <Searchbar 
                placeholder="Search" 
                handleInput={(e)=> {
                   
                    this.setState({SearchProduct: e.target.value})
                }
                 
                } 
                />
                
                <ul>
                    <h2>Categories</h2>
                    <li>Women</li>
                    <li>Men</li>
                    <li>Clothing</li>
                    <li>Equipment</li>
                 
                </ul>
            </aside>
           
           <Filter/>
            
            <Product filter={filteredProducts}/>
            
         
           
        </div>
        <Footer/>
        </div>
    )
   }
   
}

export default Store

import React，{Component，useState}来自“React”
从“../components/Product”导入产品
从“../components/Nav”导入导航
从“../components/Footer”导入页脚
从“../components/Searchbar”导入搜索栏
从“../components/Filter”导入筛选器
类存储扩展组件{
构造函数（）{
超级（）
此.state={
产品：[]，
搜索产品：“”
}
}
componentDidMount（）{
取（'http://localhost:5000/')
.then（res=>res.json（））
.then（data=>this.setState（{products:data}））
}
render（）{
让filteredProducts=this.state.products.filter（（产品）=>{
返回product.name.toLowerCase（）.includes（this.state.SearchProduct.toLowerCase（））
})
返回(
商场
{
this.setState（{SearchProduct:e.target.value}）
}
} 
/>

类别
女人
男人
服装
装备