Блог

У меня есть компонент, в котором я сопоставляю массив элементов. Я также добавляю к нему фильтр. Прямо сейчас это выглядит так:

 {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() как будет еще несколько фильтров, которые мне нужно будет применить.

Любая помощь была бы отличной.

Итак, пока состояние невыбора равно null / undefined / false, вы можете просто добавить проверку внутри фильтра

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

Вы можете применить проверку, чтобы увидеть, имеет ли item.acf.quiz.gender значение, если да, то продолжить операцию else, return 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} />;
    });
}
  

Вам просто нужно вернуть true для фильтра, если state он не установлен :

 {
    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} />;
        })
}