Показать состояние Redux React

Question

Я не знаю, почему мои console.log(el) отображают элементы объекта filters как массив - просто имена как строковый тип.

mapReducer. js

const initState = {
    filters: {
        basen: {
            active: true,
            name: 'BASEN'
        },
        koszykowka: {
            active: true,
            name: 'KOSZYKÓWKA'
        },
        pilka_nozna: {
            active: true,
            name: 'PIŁKA NOŻNA'
        },
        pilka_reczna: {
            active: true,
            name: 'PIŁKA RĘCZNA'
        },
        siatkowka: {
            active: true,
            name: 'SIATKÓWKA'
        },
        tenis: {
            active: true,
            name: 'TENIS'
        }
    }
}

objectFilters. js

{Object.keys(this.props.filters).map((el, i) => {
                console.log(el)
                return(
                    <ObjectFiltersElement 
                        key={i} 
                        name={el.name} 
                        active={el.active} 
                        changeFilterHandler={(el) => (this.changeFilterHandler(el))}
                        />
                )
            })}

objectFiltersElement. js

<div className={elementStyle} onClick={() => props.changeFilterHandler(props.name)}>
    {props.name}
</div>

И console.log(el) дайте мне это:

Элементы filters не как объекты, а как строки.

Когда я перехожу к активному объекту или имени объекта Я не нашел ответа.

    console.log("THIS.PROPS.FILTERS", this.props.filters)

Answer 1

Вы запускаете .map на Object.keys(this.props.filters), который является Array именами ключей объекта, например - ['basen', 'koszykowka', 'pilka_nozna' ....].

В вашем console.log(el) вы можете увидеть его basen (в нижнем регистре). Вам необходимо изменить данные, чтобы использовать их в вашем методе .map(). По этой причине вы получаете undefined при попытке получить доступ к active или name.

Я думаю, что этот код подойдет вам -

Object.keys(this.props.filters).map(x => this.props.filters[x]).map((el, i) => {...}

Пример кода для создания массива из объекта -

var filter = {
        basen: {
            active: true,
            name: 'BASEN'
        },
        koszykowka: {
            active: true,
            name: 'KOSZYKÓWKA'
        },
        pilka_nozna: {
            active: true,
            name: 'PIŁKA NOŻNA'
        },
        pilka_reczna: {
            active: true,
            name: 'PIŁKA RĘCZNA'
        },
        siatkowka: {
            active: true,
            name: 'SIATKÓWKA'
        },
        tenis: {
            active: true,
            name: 'TENIS'
        }
    };


var newFilter = Object.keys(filter).map(x => filter[x])

console.log(newFilter)

Второй подход -

const { filters } = this.props;
{Object.keys(filters).map((el, i) => {
                console.log(el)
                return(
                    <ObjectFiltersElement 
                        key={i} 
                        name={filters[el].name} 
                        active={filters[el].active} 
                        changeFilterHandler={(el) => (this.changeFilterHandler(el))}
                        />
                )
            })}