[英]Want to return all items when the page has been loaded
我有一个小问题。 当我进入我的商店页面(显示我的所有产品的地方)时,我需要单击尺寸过滤器以加载我的所有产品。 那不是我想要的。 我希望在加载页面时呈现所有产品。 我需要在我的代码中添加/更改什么才能使其工作?
代码存储:
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}/>
只需将setItem(products)
添加到您的useEffect
。
有关详细信息,请参阅此答案 [1],但您不能将useSelector
中的值用作useState
的默认值。
如果handleChange
适合您,您应该尝试:
useEffect(()=> {
dispatch(listProduct());
handleChange({ target: { value: ''} });
}, [])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.