通过调度函数更新状态

Question

我正在建立待办事项清单。其中一项功能是能够通过用户输入将任务添加到待办事项列表中。我以 reducer 模式持有状态中的初始待办事项列表。有一个名为 ADD_ITEM 的操作应该将新任务添加到待办事项列表中。但是，此调度功能似乎不起作用。当我单击应将新任务添加到我的待办事项列表的按钮时，它只会向列表添加一个空白 <li>。当我尝试使用用户输入添加新的待办事项和应该由输入设置的 console.log newItemText 时，它被记录为未定义。有人可以看一下代码并告诉我为什么会这样吗？

TodoList.js:

import React, { useState, useReducer } from"react";

import Todo from "./Todo";
import { initialState, reducer } from "../reducers/todoReducer";
import { ADD_ITEM } from "../actions/actions";


const TodoList = props => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const [newItemText, setNewItemText] = useState("");

    const handleChanges = e => {
        console.log(e.target.value)
        setNewItemText(e.target.vaue);
    };

    console.log(newItemText);

    return (
        <div>
            <ul className="task-list">
                {state.map(task => (
                    <Todo key={task.item} task={task} />
                ))}
            </ul>
            <input
                className="add-input"
                name="todo"
                type="text"
                placeholder="Enter a task"
                value={newItemText}
                onChange={handleChanges}
            />
            <button
                className="add-button"
                onClick={() => dispatch({ type: ADD_ITEM, payload: newItemText })}
            >
                Add a Task
            </button>
            <button
                className="add-button"
                onClick={null}
            >
                Remove Completed
            </button>
            </div>
    )
}

export default TodoList;

todoReducer.js:

import { ADD_ITEM, TOGGLE_COMPLETED, REMOVE_COMPLETED } from "../actions/actions";

export const initialState = [
    { item: 'Learn about context API', completed: false, id: 1}, 
    { item: 'Learn about reducers', completed: false, id: 2},
    { item: 'complete context API project', completed: false, id: 3},
    { item: 'complete reducers project', completed: false, id: 4}
];

export const reducer = (state = initialState, action) => {
    console.log(action)
    switch(action.type) {
        case ADD_ITEM:
            return [
                ...state,
                {
                    item: action.payload,
                    completed: false,
                    id: Date.now()
                }
            ]
        case TOGGLE_COMPLETED:
            const toggledState = [...state];
            toggledState.map(item => {
                if(item.id === action.payload) {
                    item.completed = !item.completed;
                }
            })
            state = toggledState;
            return state;
        case REMOVE_COMPLETED:
            return state.filter(item => !item.completed);
        default:
            return state;
    }
}

Answer 1

在 handleChanges 函数中，你拼错了 value:

setNewItemText(e.target.vaue);

;)

通过调度函数更新状态

updating state through dispatch function

reactjs

input

onclick

reducers

payload