React传递函数为Props时出现'Uncaught TypeError: createTask is not a function'错误怎么办？

问题出在TaskForm组件的参数接收方式上：React函数组件的第一个参数是完整的props对象，而不是单个props属性。你当前直接写function TaskForm(createTask)，这里的createTask实际上是整个props对象，而非你从App组件传递过来的函数，调用时自然会抛出“不是函数”的错误。

修正方案一：解构props对象 #

直接从props中解构出需要的createTask函数，这是React中最常用的写法：

import { useState } from "react";

function TaskForm({ createTask }) { // 添加解构语法
  const [title, setTitle] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    const newTask = {
      title,
    };
    createTask(newTask);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        placeholder="Escribe tu tarea"
        onChange={(e) => setTitle(e.target.value)}
      />
      <button>Guardar</button>
    </form>
  );
}

export default TaskForm;

修正方案二：直接使用props对象 #

如果不想解构，也可以通过props对象访问对应的属性：

import { useState } from "react";

function TaskForm(props) { // 接收完整props对象
  const [title, setTitle] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    const newTask = {
      title,
    };
    props.createTask(newTask); // 通过props访问createTask
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        placeholder="Escribe tu tarea"
        onChange={(e) => setTitle(e.target.value)}
      />
      <button>Guardar</button>
    </form>
  );
}

export default TaskForm;

额外优化建议 #

App组件中的createTask函数依赖当前的tasks状态，建议使用函数式更新来避免状态更新不及时的问题：

function createTask(task) {
  setTasks(prevTasks => [...prevTasks, task]); // 使用prevTasks获取最新状态
}

内容的提问来源于stack exchange，提问作者Yordanys Alvarez