如何觸發設置在變量中的過濾器 function？

Question

您好，我有一個過濾器 function 設置在變量中，但希望在用戶單擊按鈕后立即執行。 function enableFilter 必須檢查 item.id 是否與 item.category 匹配並觸發過濾器，因為它是真的。 任何人都可以幫助我嗎？ 不必一次過濾兩個。 一次只能過濾一個

Answer 1

您可以將過濾條件 ID 存儲在 state 變量中，如下所示：

const [selectedItemId, setSelectedItemId] = useState(null);

然后根據selectedItemId更改您的過濾器案例，例如：

const filteredCases = i18n('casesOverview.cases').filter(category => selectedItemId ? category.category.includes(selectedItemId) : true)

然后使用setSelectedItemId更新按鈕onClick道具，如下所示：

{i18n('casesOverview.categories').map((item, key) => (
              <ButtonOutline
                onClick={() => setSelectedItemId(item.id)}
                id={item.id}
                key={key}>{item.label}</ButtonOutline>
            ))
}
 <GridWideColumn>
     {filteredCases.map((item, key) => (
                <CardBrand
                  key={key}
                  text={item.teaser} href={item.link}
                  image={<Image src="" srcSet={item.coverImage} alt="" />}
                  brandImage={<Image src={item.clientLogo} alt="" />}
                  link={item.link}
                  client={item.client}
                  textInfo={item.category}
                />
      ))
     }