[英]Filter By Checkbox Issue [reactjs]
我正在嘗試通過 React 中的復選框設置過濾。
我想要發生的是:
目前發生的情況是:
所以它快到了,但是初始頁面加載缺少一些東西,有人可以告訴我錯過了什么嗎?
示例數據 =
console.log(checkedInputs) = Object { 35: true }
console.log(Item) = Object { itemID: "5190", systemSku: "item", defaultCost: "78.95", avgCost: "78.95", discountable: "true", tax: "true", archived: "false", itemType: "default", serialized: "false", description: "item", … }Object { itemID: "5191", systemSku: "item", defaultCost: "142.95", avgCost: "142.95", discountable: "true", tax: "true", archived: "false", itemType: "default", serialized: "false", description: "item", … }
在初始頁面加載時,checkedInputs =
console.log(checkedInputs = Object { })
謝謝!
產品.jsx
const Products = (props) => {
const { Item } = props.items
const { Category } = props.categories
const [checkedInputs, setCheckedInputs] = useState({})
const handleInputChange = (event) => {
setCheckedInputs({ ...checkedInputs, [event.target.value]: event.target.checked })
}
useEffect(() => {
console.log('Checked Inputs', checkedInputs)
}, [checkedInputs])
return (
<Layout>
<div className="flex mx-96">
<div className="w-1/4">
<ProductFilter category={Category} handleInputChange={handleInputChange} checkedInputs={checkedInputs} />
</div>
<div className="w-3/4">
<div className="lg:grid grid-cols-3 gap-2 lg:my-12 lg:justify-center">
{Item.map(item => {
for (const [key, value] of Object.entries(checkedInputs)) {
if (!checkedInputs || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {
return <ProductCard item={item} key={item.itemID} />
}
if (value === true) {
if (item.categoryID === key) {
console.log(item)
return <ProductCard item={item} key={item.itemID} />
}
}
}
})}
</div>
</div>
</div>
</Layout>
)
}
我不確定這是否是問題,但我認為你想改變
if (!checkedInputs || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {
return <ProductCard item={item} key={item.itemID} />
}
到
if (Object.keys(checkedInput).length < 1 || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {
return <ProductCard item={item} key={item.itemID} />
}
空對象評估為真。 我認為一個對象總是會評估為真。 (Try Boolean({}) and Boolean({x:5}))
。 另外,對於為什么在 Object.entries(checkedInputs) 的每次迭代中調用 Object.keys(checkedInputs).every,我有點困惑(我可能會遺漏一些東西)。 那個值不會改變吧? 那么它不能是您在循環之前設置的靜態值嗎?
const Products = (props) => {
const { Item } = props.items
const { Category } = props.categories
const [checkedInputs, setCheckedInputs] = useState({})
const handleInputChange = (event) => {
setCheckedInputs({ ...checkedInputs, [event.target.value]: event.target.checked })
}
useEffect(() => {
console.log('Checked Inputs', checkedInputs)
}, [checkedInputs])
function renderItems(){
let hasNoFilters = Object.keys(checkedInput).length < 1 ||
Object.keys(checkedInputs).every(value =>checkedInputs[value] === false)
if(hasNoFilters){
// return everything if no filter
return Item.map(item=>return <ProductCard item={item} key={item.itemID} />)
}
else{
let filters = Object.keys(checkedInput).filter(itemID=>checkedInput[itemID] === true)
return Item.map(item=>{
//check to make sure itemID is found in filters
let validItem = filters.find(itemID=>itemID === item.itemID)
if(!validItem)
return
return <ProductCard item={item} key={item.itemID} />
})
}
}
return (
<Layout>
<div className="flex mx-96">
<div className="w-1/4">
<ProductFilter category={Category} handleInputChange={handleInputChange} checkedInputs={checkedInputs} />
</div>
<div className="w-3/4">
<div className="lg:grid grid-cols-3 gap-2 lg:my-12 lg:justify-center">
{renderItems()}
</div>
</div>
</div>
</Layout>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.