Как фильтровать элементы после извлечения данных? - PullRequest
0 голосов
/ 05 февраля 2020

Я пытаюсь отфильтровать некоторые данные из созданного мной 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
        });
    };

Пользовательский интерфейс находится в песочницу с кодом я предоставил.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...