javascript - 为什么 toggle todo 在 Redux 中不起作用？

Question

因此，我一直在研究 Dan Abramov 的 Redux 教程，您可以在其中构建一个简单的待办事项应用程序。这是主要渲染功能的代码，

const todo = (state, action) => {
    switch(action.type){
        case 'ADD_TODO':
            return {
                id: action.id, 
                text: action.text, 
                completed: false
            }
        case 'TOGGLE_TODO': 
            if(state.id !== action.id){
                return state
            }
            return {...state,
                completed: !state.completed
            }

        default:
            return state
    }
}

const todos = (state = [], action) => {
    switch(action.type){
        case "ADD_TODO": 
            return [
                ...state, 
                todo(undefined, action)
            ]
        case "TOGGLE_TODO": 
            return state.map(t => {
                todo(t, action)
            })
        default: 
            return state;
    }
}

const visibilityFilter = (state = 'SHOW_ALL', action) => {
    switch(action.type){
        case 'SET_VISIBILITY_FILTER': 
            return action.filter
        default:
            return state
    }
}


const todoApp = combineReducers({
    visibilityFilter, 
    todos
});

const store = createStore(todoApp);

const FilterLink = ({
    filter, 
    currentFilter,
    children
}) => {
    if(filter === currentFilter){
        return <span>{children}</span>
    }
    return (
        <a href='#' onClick={e => {
            e.preventDefault();
            store.dispatch({
                type: 'SET_VISIBILITY_FILTER', 
                filter
            })
        }}>
            {children}
        </a>
    )
}

const Todo = ({
    onClick, 
    completed, 
    text
}) => (
    <li onClick={(onClick)}
    style={{textDecoration: completed ? 'line-through' : 'none'}}>
        {text}
    </li>
);

const TodoList = ({
    todos, 
    onTodoClick
}) => (
    <ul>
        {todos.map(todo => 
            <Todo key={todo.id} {...todo}
            onClick={() => onTodoClick(todo.id)} />
        )}
    </ul>
);

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

let nextTodoId = 0;
class TodoApp extends React.Component {
    render() {
        const {
            todos, 
            visibilityFilter
        } = this.props
        const visibleTodos = getVisibleTodos(todos, visibilityFilter);
        return (
            <div>
                <input ref={text => {
                    this.input = text;
                }} />
                <button onClick={() => {
                    store.dispatch({
                        type:"ADD_TODO", 
                        text: this.input.value, 
                        id: nextTodoId++
                    });
                    this.input.value = '';
                }}>Add a todo
                </button>
                <TodoList todos={visibleTodos} onTodoClick={id => store.dispatch({
                    type: 'TOGGLE_TODO', 
                    id
                })} />
                <p>
                    Show: 
                    {' '}
                    <FilterLink filter='SHOW_ALL' currentFilter={visibilityFilter}>
                        All
                    </FilterLink>
                    {' '}
                    <FilterLink filter='SHOW_COMPLETED' currentFilter={visibilityFilter}>
                        Completed
                    </FilterLink>
                    {' '}
                    <FilterLink filter='SHOW_ACTIVE' currentFilter={visibilityFilter}>
                        Active
                    </FilterLink>
                </p>
            </div>
        )
    }
}



const render = () => {
    console.log(store.getState());
    ReactDOM.render(<TodoApp {...store.getState()}/>, document.getElementById('root'));
}

store.subscribe(render);
render();

当我尝试切换待办事项时，出现以下错误，

index.js:170 Uncaught TypeError: Cannot read property 'id' of undefined

现在，当我尝试在尝试切换待办事项时注销 this.props.todos 时，它返回未定义。这就是我收到错误的原因，因为出于某种原因 this.props.todos 没有在点击事件上传递。但是，我浏览了类(class)笔记并且我有完全相同的代码。我在这里做错了什么？我该如何解决？

Answer 1

这是您要效仿的例子吗？ https://github.com/reactjs/redux/tree/master/examples/todos

不确定是否与此有关，但在您的 Todo 中，您可能想要删除 onClick 周围的 ()。

const Todo = ({
    onClick, 
    completed, 
    text
}) => (
    <li onClick={ onClick } /* <- this bit */
    style={{textDecoration: completed ? 'line-through' : 'none'}}>
        {text}
    </li>
);