Как динамически обрабатывать множество фильтров с реагировать?

Question

В настоящее время я работаю над интернет-магазином, который фильтрует товары по определенным критериям, таким как размер, ассортимент, пол и т. Д. *

Хотя я смог заставить его работать в определенной степени. Моя программа в настоящее время фильтрует по размеру, полу, сортировке по цене и т. Д. Однако я не могу заставить ее фильтровать по бренду. По какой-то причине, нажимая на марку, я могу отфильтровать функцию один раз, однако, когда я нажимаю на другую марку, фильтр для этой конкретной марки не запускается.

Мне было интересно, сможет ли кто-нибудь помочьменя. Это, наверное, очень простая вещь, которую я просто не могу понять.

Вот ссылка на изолированную программную среду кода:

https://codesandbox.io/s/mystifying-roentgen-7mp0t

В настоящее время я застрял с фильтрацией по бренду и попытался сравнить отфильтрованный результат с состояниемкликаемого элемента, проверяя, включен ли в него бренд и используя localeCompare ().

Вот ссылка на песочницу с кодом:

https://codesandbox.io/s/mystifying-roentgen-7mp0t

createCheckboxes = () => available_sizes.map (this.createCheckbox);

handleFormSubmit = event => {// 4) эта кнопка обновляет фильтры по размерам, которые, я думаю, нужно исправитьобновить бренды, цену и пол события.preventDefault ();// 5) прямо здесь я сохраняю выбранные флажки, что я делал раньше, нажимая флажки const selectedSizes = [... this.selectedCheckboxes];

const shallowCopy = [...this.state.filteredProducts];
let filteredProducts = shallowCopy.filter(product =>
  selectedSizes.every(size =>
    product.stock.some(s => s.stock > 0 && s.size === size)
  )
);


let filteredGender = filteredProducts.filter(product => {
  return product.gender.some((item, idx, arr) => {
    return item[this.selectedGender] === false ? null : product;
  });
});


//***this is the function that is not currently running***//
let filteredData = filteredGender.filter(product => {
  //console.log(product.brand.includes(this.state.activeBrand))
  //console.log(product.brand = this.state.brand)

  return product.brand.includes(this.state.activeBrand)
});

let sortedPrice = filteredData.sort((a, b) => {
  return this.state.sortBy === "min"
    ? a.price - b.price
    : b.price - a.price;
});


this.setState({
  filteredProducts: sortedPrice
});

};

Я ожидаю, что смогу отфильтровать по бренду с помощью этой функции, как только будет щелкнуть элемент.

Вот ссылка на песочницу с кодом:

https://codesandbox.io/s/mystifying-roentgen-7mp0t

Answer 1

В вашем приложении 2 ошибки:

1) первая из них сообщается @ user753642 в комментарии к вашему вопросу, удалите эту строку из index.js, поскольку она устанавливает brand для всехпродукты для "":

console.log(product.brand = this.state.brand)

2) вы фильтруете filteredProducts и не все products. Хотя после первой фильтрации по бренду filterdProducts не имеет товаров других брендов, он возвращает пустую коллекцию после фильтрации по другому бренду. Измените строку в handleFormSubmit в index.js, с:

const shallowCopy = [...this.state.filteredProducts];

на:

const shallowCopy = [...this.state.products];