如何有条件地在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} />;
        })
}