反应待办事项列表在控制台中擦除但不会从屏幕上擦除

Question

I am trying to build a todo list and when I console log it deletes the item I am attempting to delete onclick but the item stays on the screen. what I am trying to do is delete the item from the list 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

It's because you're not updating your state after splicing the item from your array. The component only re-renders when there is any change in the state. You can use the update your deleteLabel function as suggested in the previous answer:

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

Answer 2

i think is better to change your deleteLabel function to

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