React отфильтровать продукт по полу, категории и т. д. Веб-сайт электронной коммерции

const [filterSettings, setFilterSettings] = useState({
    order: "", // HIGH or LOW and default empty
    price: [0, 5000],
    gender: "", // female or male and default empty
    size: [], // default empty
    color: [], // default empty
    category: [], // default empty
  });

пробую так и не получается..

let filteredNumbers = state.product.products.filter(function (x) {
   return x.visible &&
     x.price >= filterSettings.price[0] &&
     x.price <= filterSettings.price[1] &&
     x.category.includes(filterSettings.category) &&
     filterSettings.gender
     ? x.product_gender === filterSettings.gender.toLocaleLowerCase()
     : x;
  });

Я действительно не знаю, как я могу заставить его работать, и когда это пустая категория, и когда она используется.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
20
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

попробуй это

 return x.visible &&
     x.price >= filterSettings.price[0] &&
     x.price <= filterSettings.price[1] &&
     x.category.includes(filterSettings.category) &&
     (filterSettings.gender ? x.product_gender === filterSettings.gender.toLocaleLowerCase(): false) ? x : null
Ответ принят как подходящий

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

let filteredNumbers = state.product.products.filter(function (x) {
   return x.visible &&
     x.price >= filterSettings.price[0] &&
     x.price <= filterSettings.price[1] &&
     (x.category.includes(filterSettings.category) || (filterSettings.category === []))&&
     (filterSettings.gender
     ? x.product_gender === filterSettings.gender.toLocaleLowerCase()
     : true);
  });

Другие вопросы по теме