Я пытаюсь отфильтровать некоторые данные из созданного мной API-интерфейса для отдыха.
Данные определенно будут отфильтрованы, если я получу их локально точно так же, как это (посмотрите файл "products" в этом песочница для кода, которую я сделал): https://codesandbox.io/s/magical-banzai-p10e9
Когда я пытаюсь получить данные, пользовательский интерфейс не обновляется с отфильтрованными продуктами. Я предполагаю, что это связано с хуком жизненного цикла, который я не использую, но я не могу понять, как заставить его работать.
Вот как я выбираю данные:
componentDidMount () {
axios
.get('http://localhost:4000/api/v1/products')
.then((res) => {
let products = res.data.data.data;
this.setState({
products,
filteredProducts: products,
isLoading: false
})
})
.catch(function (error) {
console.log(error);
})
}
Эта функция используется для фильтрации вышеуказанных данных:
handleFormSubmit = event => {
event.preventDefault();
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) => {
return item[this.selectedGender] === false ? null : product;
});
});
let filteredData = filteredGender.filter(product => {
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
});
};
Пользовательский интерфейс находится в песочницу с кодом я предоставил.