Ошибка типа: не удается прочитать свойство 'map' из неопределенного в приложении Redux Todo

Question

У меня есть следующий код -

Вот код для visibilityFilter:

const visibilityFilter = ( state = "SHOW_All", action ) => {
    switch(action.type){
        case 'SET_VISIBILITY_FILTER':
            return action.filter;

        default:
            return state;
    }
}

Ниже приведен код getVisibleTodos:

const getVisibleTodos= (
    todos = [],
    filter
) => {
    switch(filter){
    case 'SHOW_ALL': 
        return todos;
    case 'SHOW_ACTIVE':
        return todos.filter(
            t => !t.completed
        );
    case 'SHOW_COMPLETED':
            return todos.filter(
                t => t.completed
            );
    }
}

class Todo extends Component {
    render(){
        const visibleTodos = getVisibleTodos(
            this.props.values,
            this.props.visibilityFilter
        )

    return(

        <div>
            <label>Enter your item</label>
            <br />
            <input 
                type="text" 
                ref = { node => this.input = node }
            />

            <button onClick={() => {
                store.dispatch({
                    type: 'ADD_TODO',
                    id: nextToDoId++,
                    text: this.input.value
                });
                this.input.value = '';
                }}>
                Submit
            </button>

            <br />

            <ul>
            **{visibleTodos.map(value => <li key={value.id}**
                                                onClick={() => {
                                                    store.dispatch({
                                                        type:     
'TOGGLE_TODO',
                                                        id: value.id
                                                    })
                                                }}
                                                style={{
                                                    textDecoration:
                                                        value.completed 
?
                                                            'line- 
through' :
                                                            'none' 
                                                }}>
                                            {`${value.text} `}
                                        </li>
                                )}
            </ul>

            <p>
                Show: {' '}
                <FilterLink filter="SHOW_ALL">
                    All
                </FilterLink>
                {' '}
                <FilterLink filter="SHOW_ACTIVE">
                    Active
                </FilterLink>
                {' '}
                <FilterLink filter="SHOW_COMPLETED">
                    Completed
                </FilterLink>
            </p>

        </div>
        )   
    }
}

В частности, яполучаю ошибку в строке, которая содержит {visibleTodos.map

Я получаю сообщение об ошибке TypeError: Невозможно прочитать свойство 'map' из неопределенного.Я не могу найти решение этой ошибки.Пожалуйста, помогите!

Я следую учебнику по Redux Дана Абрамова на egghead.io

Answer 1

Вы ошиблись при вводе начального состояния фильтра видимости:

const visibilityFilter = ( state = "SHOW_All", action ) => {

Вы ввели SHOW_All, хотя я думаю, что оно должно быть SHOW_ALL, как в getVisibleTodos.Эта опечатка не приводит к совпадению ни одного из switch случаев в getVisibleTodos.Так как switch не имеет регистра по умолчанию, возвращаемое значение неявно undefined, что приводит к TypeError при попытке вызвать map().