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

React Component不重新渲染

1 个答案: