javascript - react 待办事项列表在控制台中删除但不会从屏幕上删除

Question

我正在尝试构建一个待办事项列表，当我控制台日志时，它会删除我试图删除 onclick 的项目，但该项目仍保留在屏幕上。我想要做的是从 onclick 列表中删除该项目。

    import React, { useState } from "react";

    export function Todos() {
    const [tasks, setTasks] = useState([]);

    const deleteLabel = ind => {
        tasks.splice(ind, 1);
        console.log(tasks);
    };

    return (
        <div className="container d-flex justify-content-center">
            <div className="row">
                <div className="col">
                    <input
                        onKeyUp={e =>
                            e.keyCode === 13 &&
                            setTasks(
                                tasks.concat({
                                    label: e.target.value
                                })
                            )
                        }
                    />
                    <div className="list-group">
                        {tasks === null
                            ? "Loading..."
                            : tasks.map((t, index, myarr) => (
                                    <a
                                        href="#"
                                        className="list-group-item list-group-item-action"
                                        key={index}
                                        onClick={() => {
                                            deleteLabel(index);
                                        }}>
                                        {t.label}
                                    </a>
                              ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

Answer 1

我认为最好将您的 deleteLabel 函数更改为

const deleteLabel = ind => {
    const newTasks = [...tasks]
    newTasks.splice(ind, 1);
    setTasks(newTasks)
    console.log(newTasks);
};