[英]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.