为了账号安全,请及时绑定邮箱和手机立即绑定

按复选框过滤问题 [reactjs]

按复选框过滤问题 [reactjs]

慕容708150 2023-08-24 20:57:48
我正在尝试在 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 { })谢谢!
查看完整描述

2 回答

?
ITMISS

TA贡献1871条经验 获得超8个赞

我不确定这是否是问题所在,但我认为你想要改变


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

}

空对象的计算结果为 true。我认为一个对象总是会评估为 true。(Try Boolean({}) and Boolean({x:5}))。另外,我有点困惑(我可能会遗漏一些东西),为什么你在 Object.entries(checkedInputs) 的每次迭代中调用 Object.keys(checkedInputs).every 。该值不会改变,对吗?那么它不能是你在循环之前设置的静态值吗?


查看完整回答
反对 回复 2023-08-24
?
ibeautiful

TA贡献1993条经验 获得超5个赞

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>

  )

}


查看完整回答
反对 回复 2023-08-24
  • 2 回答
  • 0 关注
  • 104 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信