Question

我有以下代码-

这是可视性过滤器的代码：

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”。我无法找到此错误的解决方案。请帮忙！

我正在关注Egghead.io上Dan Abramov的Redux教程

Answer 1

您输入了可见性过滤器的初始状态：

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

您键入了SHOW_All，但我猜应该像SHOW_ALL中那样输入getVisibleTodos。此错字导致switch中的getVisibleTodos个案例都不匹配。由于switch没有默认大小写，因此返回值隐式为undefined，在尝试调用TypeError时会导致返回map()。

TypeError：无法读取Redux Todo应用程序中未定义的属性“ map”

1 个答案: