Javascript 按复选框筛选问题[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", … }

在初始页面加载时检查输入=

console.log(checkedInputs = Object { })

谢谢

---

Products.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>
  )
}

const产品=（道具）=>{
const{Item}=props.items
const{Category}=props.categories
常量[checkedInputs，setCheckedInputs]=useState（{}）
常量handleInputChange=（事件）=>{
setCheckedInputs（{…checkedInputs，[event.target.value]：event.target.checked}）
}
useffect（（）=>{
log（'Checked input'，checkedInputs）
}，[checkedInputs]）
返回(
{Item.map（Item=>{
for（Object.entries（checkedInputs））的常量[key，value]{
if（！checkedInputs | | Object.keys（checkedInputs.every）（value=>checkedInputs[value]==false））{
返回
}
如果（值===true）{
如果（item.categoryID==键）{
console.log（项目）
返回
}
}
}
})}
)
}

我不确定这是否是问题所在，但我想你需要改变

if (!checkedInputs || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {
  return <ProductCard item={item} key={item.itemID} />
}

if（！checkedInputs | | Object.keys（checkedInputs.every）（value=>checkedInputs[value]==false））{
返回
}

到

if（Object.keys（checkedInput）.length<1 | | Object.keys（checkedInputs）.every（value=>checkedInputs[value]==false））{
返回
}

空对象的计算结果为true。我认为一个物体的评价总是正确的

（尝试布尔（{}）和布尔（{x:5}））

。另外，对于为什么要调用Object.keys（checkedInputs）。Object.entries（checkedInputs）的每次迭代，我都有点困惑（我可能遗漏了一些东西）。这个值不会改变，对吗？那么，它不能是在循环之前设置的静态值吗？

constproducts=（props）=>{
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>
  )
}

const{Item}=props.items
const{Category}=props.categories
常量[checkedInputs，setCheckedInputs]=useState（{}）
常量handleInputChange=（事件）=>{
setCheckedInputs（{…checkedInputs，[event.target.value]：event.target.checked}）
}
useffect（（）=>{
log（'Checked input'，checkedInputs）
}，[checkedInputs]）
函数renderItems（）{
设hasNoFilters=Object.keys（checkedInput）.length<1 | |
Object.keys（checkedInputs）.every（value=>checkedInputs[value]==false）
if（hasNoFilters）{
//如果没有过滤器，则返回所有内容
returnitem.map（Item=>return）
}
否则{
让filters=Object.keys（checkedInput）.filter（itemID=>checkedInput[itemID]==true）
返回Item.map（Item=>{
//检查以确保在筛选器中找到itemID
让validItem=filters.find（itemID=>itemID==item.itemID）
如果（！validItem）
返回
返回
})
}
}  
返回(
{renderItems（）}
)
}

您可以共享数据结构吗？（Item和checkedInputs）当然，我会在上面添加它。它看起来很难，items是一个对象数组。每个对象都添加一个显示默认值true的属性。当点击复选框时，除了点击谁，所有产品显示都会转换为false。我知道你的答案，不幸的是，它没有解决问题。我可能不需要这么做：）按照你提到的顺序修好了！非常感谢。和“Object.keys（checkedInput）.length<1”

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