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

Question

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

代码存储：

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}/>

Answer 1

只需将setItem(products) 添加到您的useEffect。

有关详细信息，请参阅此答案[1]，但您不能使用来自 useSelector 的值作为 useState 的默认值。

[1]Should I pass useSelector to useState

Answer 2

如果handleChange 适合你，你应该试试：

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