обновление состояния через диспетчерскую функцию - PullRequest
Новая
       9

обновление состояния через диспетчерскую функцию

0 голосов
/ 24 января 2020

Я строю список дел. Одной из функций является возможность добавлять задачи в список дел с помощью пользовательского ввода. Я держу начальный список задач в состоянии в образце редуктора. Существует действие под названием ADD_ITEM, которое должно добавить новую задачу в список задач. Однако эта функция отправки не работает. Когда я нажимаю кнопку, которая должна добавить новую задачу в мой список задач, она добавляет только пустой <li> в список. Когда я пытаюсь использовать пользовательский ввод для добавления нового todo и 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;
    }
}

1 Ответ

1 голос
/ 24 января 2020

Внутри handleChanges функция, вы ошиблись value:

setNewItemText (e.target. vaue );

;)

...