0

есть такой код декоратора, он заворачивает всплывающее меню в контейнер, который прослушивает редюсер и сам, со временем, будет обслуживать событие handleClickOutside.

Свойство на основе которого он принимает решение показывать всплывающий список или нет на самом деле меняется. Но cам компонент отрисовывается лишь однажды и больше ререндерится не хочет.

let mapStateToProps = (state) =>
{
    return {
        /** Preloading status */
        dropdowns: state.ux2.dropdowns,
    }
}

let mapDispatchToProps = (dispatch) =>
{
    return {
        /** Toggle preloader status */
        toggleDropdown: (isOpen, label) => { dispatch( ToggleDropdownAC(isOpen, label) ) }
    }
}

/** Decorator function for wrapped components which needs preloading  */
export const dropdownComponent = label => (WrappedComponent) => {

    class Decorator extends React.Component {

        constructor(props) {
            super(props);
            this.label = label
        }

        render()
        {
            /** this if calls bad state warning */
            const currentDropdown = this.props.dropdowns.find(dropdown => dropdown.label === this.label)

            debugger

            if (currentDropdown && currentDropdown.isOpen) {
                return <WrappedComponent {...this.props} label={this.label} />
            } else {
                return <div/>;
            }
        }
    }
    return connect(mapStateToProps, mapDispatchToProps)(Decorator)
}

И код редюсера, сначала он просто менял свойство в элементе массива, теперь он подменяет элемент свой копией с переписанным свойством, но это ни на что не влияет. Я думаю дело все таки в условной конструкции а не в нем.

let initialState =
    {
        /** Show global preloader while fetching some data or passing connect generation*/
        dropdowns:[
            { isOpen: false, label: "headerDropdown", children: null }
        ]
    }

const dropdownReducer = (state = initialState, action) => {

    switch (action.type) {
        /** Change document title */
        case TOGGLE_DROPDOWN: {

            let currentDropdownIndex = state.dropdowns.findIndex(dropdown => dropdown.label === action.label)
            let currentDropdown = {...state.dropdowns[currentDropdownIndex], isOpen:action.isOpen}
            state.dropdowns[currentDropdownIndex] = currentDropdown
            //currentDropdown.isOpen = action.isOpen

            debugger
            return {
                ...state,
                /** Copy posts and unshift new post */
                //dropdowns:[...state.dropdowns]}
            }

        }

        default: return state
    }
}
export default dropdownReducer

export const ToggleDropdownAC = (isOpen, label) => { return { type:TOGGLE_DROPDOWN, isOpen, label } }

1 ответ 1

0

Все таки дело было в редюсоре:

switch (action.type) {
        /** Handle ToggleDropdown */
        case TOGGLE_DROPDOWN: {

            let currentDropdown = state.dropdowns.find(dropdown => dropdown.label === action.label)
            currentDropdown.isOpen = action.isOpen

            return {
                ...state,
                /** Copy dropdowns */
                dropdowns:[...state.dropdowns]
            }

        }

        default: return state
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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