如何有條件地在javascript數組中包含過濾器

Question

我有一個組件，我在其中映射了一組項目。 我也在給它添加一個過濾器。 現在它看起來像這樣：

{data.products                  
  .filter((item) => item.acf.quiz.gender.some(({ value }) => value === state.theme.quiz.quizGender))
  .map((item, id) => {
    return <ProductCard key={id} item={item} data={data} />;
  })
}

因此，如果性別已通過另一個組件中的單選按鈕設置為狀態，則地圖將按該性別是屬性的項目進行過濾。 我讓那部分工作得很好。

不過，我想弄清楚的是，是否有一種方法可以有條件地應用該過濾器，以便如果用戶未設置其性別，則該過濾器將不適用。 我知道有一種方法可以在地圖之外執行此操作，但我需要與此.filter()內聯執行此.filter() ，因為我將需要應用更多過濾器。

任何幫助都會很棒。

Answer 1

所以只要非選擇狀態為空/未定義/假，你就可以在過濾器內添加一個檢查

.filter((item) => 
  !state.theme.quiz.quizGender || 
  item.acf.quiz.gender.some(({ value }) => 
    value === state.theme.quiz.quizGender)
)

Answer 2

您可以應用檢查以查看item.acf.quiz.gender是否有值，如果有則繼續操作，否則返回false

{
  data.products
    .filter((item) =>
      item.acf.quiz.gender
        ? item.acf.quiz.gender.some(
            ({ value }) => value === state.theme.quiz.quizGender
          )
        : false
    )
    .map((item, id) => {
      return <ProductCard key={id} item={item} data={data} />;
    });
}

Answer 3

如果state未設置，您只需要在過濾器上返回 true ：

{
    data.products
        .filter((item) => 
            !state?.theme?.quiz?.quizGender
            || item.acf.quiz.gender.some(({
                    value
                }) => value === state.theme.quiz.quizGender)
        )
        .map((item, id) => {
            return <ProductCard key = {id} item={item} data={data} />;
        })
}