Javascript 要在加载页面后返回所有项目吗

我有点小问题。当我进入“我的商店”页面（显示我的所有产品）时，我需要单击尺寸过滤器以加载我的所有产品。那不是我想要的。我希望在加载页面时呈现所有产品。为了使代码正常工作，我需要在代码中添加/更改什么

代码存储：

import React,{Component, useState,useEffect} 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'
import { listProduct } from '../../actions/productActions'
import {useDispatch,useSelector} from 'react-redux'
import {Link} from 'react-router-dom'





 function Store(){

    const productList = useSelector(state=>state.productList)
    const{products,loading,error}=productList
    const dispatch = useDispatch()
    const [items, setItem] = useState(products)
   
    

    
    

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

    }, [products])

    // handlefilter for sizes
    const  handleChange = (e) => {
   
           if(e.target.value === 'S'){           
            setItem(products.filter(item=> item.size === "S" ) ) 
           }
           else if(e.target.value === 'XS'){
            setItem(products.filter(item=> item.size === "XS" ) ) 
           }
           else if(e.target.value === 'M'){
             setItem(products.filter(item=> item.size === "M" ) ) 
           }
           else if(e.target.value === 'L'){
            setItem(products.filter(item=> item.size === "L" ) ) 
           }
           else if(e.target.value === 'XL'){
             setItem(products.filter(item=> item.size === "XL" ) ) 
              
           }
           else {
             setItem(products)
           }      
           
    }
   

    //handle filter for sorting 
    const handleSort = (e)=> {
        console.log(e.target.value)
    }

    //handle filter for searching




    

     
    return (
        
        <div>
        <Nav/>
        <div className="store">

           
            <div className="title">
                <h1>Store</h1>
            </div>
            <aside>
                <Searchbar/>
                
                <ul>
                    <h2>Categories</h2>
                    <li>Women</li>
                    <li>Men</li>
                    <li>Clothing</li>
                    <li>Equipment</li>
                 
                </ul>
            </aside>
           
           <Filter handleChange={handleChange || handleSort}/>
       
            
        
   
           
           <ul className="products">
                     
       {
           
           items.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>  <div>{product.qty} left</div></div> : <div>out of stock</div> }   
            
          
             
             </li>    
                
           
                )
                
                )
       }
       </ul>

        
         
            
         
           
        </div>
        <Footer/>
        </div>
    )
   
   
}

export default Store



code filter: 

<select onChange={props.handleChange}/>

import React，{Component，useState，useffect}来自'React'
从“../components/Product”导入产品
从“../components/Nav”导入导航
从“../components/Footer”导入页脚
从“../components/Searchbar”导入搜索栏
从“../components/Filter”导入筛选器
从“../../actions/productActions”导入{listProduct}
从“react redux”导入{useDispatch，useSelector}
从“react router dom”导入{Link}
函数存储（）{
const productList=useSelector（state=>state.productList）
const{products，loading，error}=productList
const dispatch=usedpatch（）
const[items，setItem]=useState（产品）
useffect（（）=>{
分派（listProduct（））
集合项目（产品）
}，[产品]）
//尺寸用手滤器
常数handleChange=（e）=>{
如果（e.target.value=='S'）{
setItem（products.filter（item=>item.size==“S”））
}
否则如果（e.target.value=='XS'）{
setItem（products.filter（item=>item.size==“XS”））
}
否则如果（e.target.value=='M'）{
setItem（products.filter（item=>item.size==“M”））
}
else if（e.target.value=='L'）{
setItem（products.filter（item=>item.size==“L”））
}
否则如果（e.target.value=='XL'）{
setItem（products.filter（item=>item.size==“XL”））
}
否则{
集合项目（产品）
}      
}
//用于排序的句柄过滤器
常量handleSort=（e）=>{
console.log（例如target.value）
}
//用于搜索的句柄过滤器
返回(
商场

类别
女人
男人
服装
装备


{
items.map（产品=>(

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

大小：{product.size}
{product.qty>0？{product.qty}剩余：缺货}

)
)
}

)
}
导出默认存储
代码过滤器：

只需将

设置项（产品）

添加到

useffect

中即可

有关详细信息，请参见此答案[1]，但不能使用

useSelector

中的值作为

useState

的默认值

---

[1]

如果

handleChange

对您有效，您应该尝试：

useEffect(()=> {
        dispatch(listProduct());
        handleChange({ target: { value: ''} });
}, [])

---

我按你说的做了，但是现在过滤器不工作了。调用了

handleChange

函数吗？如果我调用它，则不会。它会给我一个错误：×TypeError:无法读取undefinedsee上面编辑的问题的属性'target'，为了更清楚地了解代码，我添加了您所说的代码+过滤器组件。我的意思是，当您单击过滤器时，

handleChange

函数是否被调用，如果是，

event.target.value

的值是您期望的值吗？

Filter

组件不包括在这里，所以我不知道。。