0

В рамках проекта я делаю фильтр с использованием redux. Есть компонент со списком товаров и есть компонент с фильтром. Должна быть возможность фильтровать список товаров по стилю и по полу. В настоящий момент столкнулся с следующей ситуацией - при первой попытке отфильтровать по полу (например выбираю мужской), ничего не происходит, при втором действии с фильтром (например снимаю метку "Мужской") происходит обновление состояния в соответствии с первой попыткой - фильтр по полу снят, но список товаров отфильтрован по категории "Мужской". Проверял - это не проблема рендеринга, почему-то состояние обновляется именно таким образом.

Редюсер:

    let initState = {
    styles: [],
    gender: []
}

const productFiltersReduser = (state = initState, action) =>{
    switch(action.type){
        case "CHANGE-FILTERS": 
            return {...state, styles: action.value.styles, gender: action.value.gender};
        default: return state;
    }
}

export default productFiltersReduser;

Действие:

const changeFilters = (filters) =>{
    return{
        type: "CHANGE-FILTERS",
        value: filters
    }
}

export default {changeFilters};

Компонент с фильтром:

import React, {Component} from 'react';
import style from './product-filters.module.css';
import {connect} from "react-redux";
import produts from '../../../../store/mainPageStore/actions/productFilters.js';

class ProductFilters extends Component{

    createFilter = (name, values) => {
        let options = this.createFilterOptions(values);
        return <div className={style.filter}>
            <p className={style.filter_name}>{name}
            <img className={style.filter_arrow} src={require("./img/filter-arrow.svg")}/></p>
            <ul className={style.options_container}>{options}</ul>
        </div>;
    }
    
    createFilterOptions = (options) =>{
        return options.map(option=>{
            return(
                <li className={style.option}>{option}</li>
            )
        });
    }

    renderFilters = (filters) =>{
        return filters.map(filter =>{
                return this.createFilter(filter.name, filter.values);
            });
    }

    renderProductFilters = this.renderFilters(this.props.filters);

    toggleFilterOptions = (event) =>{
        if(event.target.className==style.filter_name){
            event.target.parentElement.children[1].style.opacity = window.getComputedStyle(event.target.parentElement.children[1]).opacity==0?1:0;
        }else if(event.target.classList.contains(style.option)){
            event.target.classList.toggle(style.active_option);
            this.props.dispatch(products.changeFilters(this.changeFilters()));
            this.props.updateDesigners();
        }
    }

    changeFilters = () =>{
        let stylesFilters = [];
        let genderFilters = [];
        let stylesActiveFilters = document.getElementsByClassName(style.filter_block)[0].children[1].children[1].children;
        let genderActiveFilters = document.getElementsByClassName(style.filter_block)[0].children[2].children[1].children;
        for(let i=0; i<stylesActiveFilters.length; i++){
            if(stylesActiveFilters[i].classList.contains(style.active_option))
            stylesFilters.push(stylesActiveFilters[i].textContent);
        }
        for(let i=0; i<genderActiveFilters.length; i++){
            if(genderActiveFilters[i].classList.contains(style.active_option)){
                genderFilters.push(genderActiveFilters[i].textContent);
            }
        }
        let newState = {styles: stylesFilters, gender: genderFilters};
        console.log(newState);
        return(newState);
    }

    render(){
        return(
            <div className={style.filter_block} onClick={this.toggleFilterOptions}>
                {this.renderFilters}
            </div>
        )
    }
}

function mapStateToProps(state){
    return{
        mainPageStore:state.productFiltersReduser
    }
}

export default connect(
    mapStateToProps
)(productFilters);

При этом если вывести в консоль хранилище из функции mapStateToProps, то там значение обновляется корректно, но в props попадает предыдущее значение Прошу подсказать в чем может быть причина

1
  • Зачем гадать? Установи Redux DevTools и посмотри историю вызовов. Если проблема в последовательности вызовов, то копай в эту сторону, иначе ищи проблему в рендере. 29 дек 2021 в 15:40

1 ответ 1

0

Скорее всего дело в том, что при изменении стейта фильтров, вы пытаетесь получить новый список товаров не дождавшись, когда стейт фильтров примет новое значение, так как изменение стейта - это асинхронное действие. Делайте вызов получения всех товаров только тогда, когда стейт с фильтрами точно поменяется. Используйте componentDidUpdate

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.