第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

按復(fù)選框過濾問題 [reactjs]

按復(fù)選框過濾問題 [reactjs]

慕容708150 2023-08-24 20:57:48
我正在嘗試在 React 中通過復(fù)選框設(shè)置過濾。我想要發(fā)生的是：用戶導(dǎo)航到所有產(chǎn)品都顯示在頁面加載的產(chǎn)品。用戶選擇復(fù)選框并顯示過濾后的產(chǎn)品。取消選中該復(fù)選框?qū)⒃俅畏祷厮挟a(chǎn)品。目前發(fā)生的情況是：用戶導(dǎo)航至產(chǎn)品，但不顯示任何產(chǎn)品。用戶選擇復(fù)選框，過濾后的產(chǎn)品將返回。使用取消選擇復(fù)選框，所有產(chǎn)品都會被退回。就快到了，但是初始頁面加載時缺少一些東西，任何人都可以告訴我錯過了什么嗎？示例數(shù)據(jù) =    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條經(jīng)驗 獲得超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} />

}

空對象的計算結(jié)果為 true。我認為一個對象總是會評估為 true。(Try Boolean({}) and Boolean({x:5}))。另外，我有點困惑（我可能會遺漏一些東西），為什么你在 Object.entries(checkedInputs) 的每次迭代中調(diào)用 Object.keys(checkedInputs).every 。該值不會改變，對嗎？那么它不能是你在循環(huán)之前設(shè)置的靜態(tài)值嗎？


查看完整回答
反對 回復(fù) 2023-08-24
?
ibeautiful

TA貢獻1993條經(jīng)驗 獲得超6個贊

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>

  )

}


查看完整回答
反對 回復(fù) 2023-08-24
  • 2 回答
  • 0 關(guān)注
  • 205 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號