已传递props但React Todo组件的completeTodo与removeTodo函数不生效求助

• 核心错误1：Todo组件内按钮点击事件拼写错误，你写的onCllick多了1个字母l，正确的React点击事件属性名为onClick，这是两个功能函数不触发的直接原因。
• 核心错误2：TodoForm组件内的handleSubmit方法没有加const变量声明，直接赋值会抛出未定义错误。
• 优化错误3：addTodo方法新增待办时未补充isCompleted: false默认值，会导致新增的待办无法正确触发完成样式。

修正后完整代码 #

import React, { useState } from "react";

function Todo({ todo, index, completeTodo, removeTodo }) {
  console.log("hiiii");
  return (
    <div>
      <div className={todo.isCompleted ? "line-through" : ""}>
        <p>{todo.text}</p>
      </div>
      <button onClick={() => completeTodo(index)}>completed</button>
      <button onClick={() => removeTodo(index)}>X</button>
    </div>
  );
}

function TodoForm({ addTodo }) {
  const [value, setValue] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="add new todo"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
        />
      </form>
    </div>
  );
}

function App() {
  const [todos, setTodos] = useState([
    {
      text: "eat lunch",
      isCompleted: false
    },
    {
      text: "do homework",
      isCompleted: false
    },
    {
      text: "go to school",
      isCompleted: false
    }
  ]);

  const addTodo = (text) => {
    const newTodos = [...todos, { text, isCompleted: false }];
    setTodos(newTodos);
  };

  const completeTodo = (index) => {
    console.log("completed");
    const newTodos = [...todos];
    newTodos[index].isCompleted = true;
    setTodos(newTodos);
  };

  const removeTodo = (index) => {
    console.log("deleted");
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <div>
        {todos.map((todo, index) => {
          return (
            <Todo
              key={index}
              index={index}
              todo={todo}
              completeTodo={completeTodo}
              removeTodo={removeTodo}
            />
          );
        })}
      </div>
      <div>
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
}
export default App;

内容的提问来源于stack exchange，提问作者na ha