按复选框过滤问题 [reactjs]

Question

我正在尝试在 React 中通过复选框设置过滤。

我想要发生的是：

1. 用户导航到所有产品都显示在页面加载的产品。

2. 用户选择复选框并显示过滤后的产品。

3. 取消选中该复选框将再次返回所有产品。

目前发生的情况是：

1. 用户导航至产品，但不显示任何产品。

2. 用户选择复选框，过滤后的产品将返回。

3. 使用取消选择复选框，所有产品都会被退回。

就快到了，但是初始页面加载时缺少一些东西，任何人都可以告诉我错过了什么吗？

示例数据 =

    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 { })

谢谢！

Answer 1

我不确定这是否是问题所在，但我认为你想要改变if (!checkedInputs || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {&nbsp; return <ProductCard item={item} key={item.itemID} />}到if (Object.keys(checkedInput).length < 1 || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {&nbsp; return <ProductCard item={item} key={item.itemID} />}空对象的计算结果为 true。我认为一个对象总是会评估为 true。(Try Boolean({}) and Boolean({x:5}))。另外，我有点困惑（我可能会遗漏一些东西），为什么你在 Object.entries(checkedInputs) 的每次迭代中调用 Object.keys(checkedInputs).every 。该值不会改变，对吗？那么它不能是你在循环之前设置的静态值吗？

Answer 2

const Products = (props) => {&nbsp; const { Item } = props.items&nbsp; const { Category } = props.categories&nbsp; const [checkedInputs, setCheckedInputs] = useState({})&nbsp; const handleInputChange = (event) => {&nbsp; &nbsp; setCheckedInputs({ ...checkedInputs, [event.target.value]: event.target.checked })&nbsp; }&nbsp; useEffect(() => {&nbsp; &nbsp; console.log('Checked Inputs', checkedInputs)&nbsp; }, [checkedInputs])&nbsp; function renderItems(){&nbsp; &nbsp; let hasNoFilters = Object.keys(checkedInput).length < 1 ||&nbsp;&nbsp; &nbsp; &nbsp; Object.keys(checkedInputs).every(value =>checkedInputs[value] === false)&nbsp; &nbsp; if(hasNoFilters){&nbsp; &nbsp; &nbsp; // return everything if no filter&nbsp; &nbsp; &nbsp; return Item.map(item=>return <ProductCard item={item} key={item.itemID} />)&nbsp; &nbsp; }&nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; let filters = Object.keys(checkedInput).filter(itemID=>checkedInput[itemID] === true)&nbsp; &nbsp; &nbsp; return Item.map(item=>{&nbsp; &nbsp; &nbsp; &nbsp; //check to make sure itemID is found in filters&nbsp; &nbsp; &nbsp; &nbsp; let validItem = filters.find(itemID=>itemID === item.itemID)&nbsp; &nbsp; &nbsp; &nbsp; if(!validItem)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; &nbsp; &nbsp; return <ProductCard item={item} key={item.itemID} />&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp;&nbsp; return (&nbsp; &nbsp; <Layout>&nbsp; &nbsp; &nbsp; <div className="flex mx-96">&nbsp; &nbsp; &nbsp; &nbsp; <div className="w-1/4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ProductFilter category={Category} handleInputChange={handleInputChange} checkedInputs={checkedInputs} />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div className="w-3/4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="lg:grid grid-cols-3 gap-2 lg:my-12 lg:justify-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {renderItems()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </Layout>&nbsp; )}