reactjs - 通过 dispatch 函数更新状态

问题描述

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

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;
    }
}

标签： reactjsinputonclickreducerspayload

reactjs - 通过 dispatch 函数更新状态

问题描述

解决方案

推荐阅读