反應組件不重新渲染

Question

我正在使用助焊劑，由於某種原因，在添加新的 Todo 時，組件沒有重新渲染。 當單擊刪除或更改復選框時，它是。 這是什么原因造成的？ 實際列表正在另一個組件中呈現，但它沒有邏輯。 如果您需要更多回答，可以在這里查看我的代碼http://github.com/lukeshay/react_spring_web_app 。 它位於“fix-todo-page-update”分支上。

import React, { useState, useEffect } from "react";
import TodoList from "./TodoList";
import "bootstrap/dist/css/bootstrap.min.css";
import todoStore from "../../stores/todoStore";
import { loadTodos, saveTodo, deleteTodo } from "../../actions/todoActions";
import { toast } from "react-toastify";

function TodoPage() {
    const [loading, setLoading] = useState(true);
    const [adding, setAdding] = useState(false);
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState({
        text: "",
        completed: false
    });

    useEffect(() => {
        todoStore.addChangeListener(onChange);
        if (todoStore.getTodos().length === 0) {
            loadTodos();
            setLoading(false);
        }
        return () => todoStore.removeChangeListener(onChange);
    }, []);

    useEffect(() => {
        console.log(newTodo);

        if (!adding && newTodo.text !== "") {
            saveTodo(newTodo);
            toast.success("Todo saved.");
        }

        setNewTodo({
            text: "",
            completed: false
        });
    }, [adding]);

    async function onChange() {
        setTodos(todoStore.getTodos());
    }

    async function onCheckboxChange({ target }) {
        console.log(target.name);

        var todoToUpdate = todos.find(
            todo => todo.id === parseInt(target.name)
        );
        todoToUpdate.completed = !todoToUpdate.completed;
        saveTodo(todoToUpdate);
    }

    async function onDeleteButtonClick({ target }) {
        deleteTodo(target.name);
    }

    async function onAddClick() {
        setAdding(!adding);
    }

    async function onInputChange({ target }) {
        const { value } = target;
        setNewTodo({ ...newTodo, text: value });
    }

    async function handleKeyPress({ target, key }) {
        if (key === "Enter" && target.name === "newTodo") {
            setAdding(false);
        }
    }

    if (loading) {
        return <h1>Loading...</h1>;
    } else {
        return (
            <div className="col-lg-12">
                <div className="card px-3">
                    <div className="card-body">
                        <h4 className="card-title text-center">Todo list</h4>
                        <TodoList
                            todos={todos}
                            onCheckboxChange={onCheckboxChange}
                            onDeleteButtonClick={onDeleteButtonClick}
                        />
                        {adding && (
                            <input
                                type="text"
                                name="newTodo"
                                value={newTodo.text}
                                onChange={onInputChange}
                                onKeyPress={handleKeyPress}
                            />
                        )}

                        <button className="" name="add" onClick={onAddClick}>
                            Add Todo
                        </button>
                    </div>
                </div>
            </div>
        );
    }
}

export default TodoPage;

Answer 1

我懷疑我沒有測試的服務器請求出了點問題。 我修改了您的saveTodo操作，如下所示，並渲染了新的 Todo 元素：

export async function saveTodo(todo) {
    const savedTodo = todo;//await todoApi.saveTodo(todo);
    dispatcher.dispatch({
        actionType: todo.id ? actionTypes.UPDATE_TODO : actionTypes.CREATE_TODO,
        todo: savedTodo
    });
}