#React 刚刚试着上手，请教大家解惑

子组件TodoList.jsx

export default function TodoList({ todos, toggleTodo, deleteTodo }) {
  return (
    <>
      {todos.length === 0 && <div>No Todos</div>}

      {/* 展示任务清单 */}
      <ul className="list">
        {todos.map((todo) => {
          return (
            <li key={todo.id}>
              <label>
                <input
                  type="checkbox"
                  checked={todo.completed}
                  onChange={(e) => toggleTodo(todo.id, e.target.checked)}
                />
                {todo.title}
              </label>
              <button
                className="btn btn-danger"
                onClick={() => deleteTodo(todo.id)}
              >
                delete task
              </button>
            </li>
          );
        })}
      </ul>
    </>
  );
}

主界面

/* eslint-disable no-unused-vars */
import React, { useState } from "react";
import "../styles.css";
import NewTodoForm from "./NewTodoForm";
import TodoList from "./TodoList";

// 抽离添加任务表单
export default function App() {
  const [todos, setTodos] = useState([]);

  function addTodos(title) {
    setTodos((current) => {
      return [
        ...current,
        { id: crypto.randomUUID(), title: title, completed: false },
      ];
    });
  }

  // 点击任务
  function toggleTodo(id, completed) {
    setTodos((current) => {
      return current.map((todo) => {
        if (todo.id == id) {
          return {
            ...todo,
            completed: completed,
          };
        } else {
          return todo;
        }
      });
    });
  }

  // 删除任务
  function deleteTodo(id) {
    setTodos((current) => {
      return current.filter((todo) => {
        return todo.id !== id;
      });
    });
  }

  return (
    <>
      <NewTodoForm addTodos={addTodos} />
      <h1 className="header">Todo List</h1>
      <TodoList todos={todos} />
      P2_App
    </>
  );
}

运行之后在浏览器中点击调用 toggleTodo(),deleteTodo()，报错显示：

谢谢大家！