React报错props.onEnterTask is not a function排查

API 探路者

2026-8-27

报错定位与原因

你遇到的Uncaught TypeError: props.onEnterTask is not a function报错，核心是代码中存在多处不规范写法和拼写错误，直接触发原因如下：

最高概率的触发点是拼写不规范导致prop传值异常：你在useHttp.js中返回的加载状态字段是驼峰命名的isLoading（L大写），但在Newtask.js中解构时写成了全小写的isloading，拿到的值是undefined。这种随意的拼写习惯很容易在传onEnterTaskprop时写错变量名/属性名，导致子组件拿到的onEnterTask是undefined而非函数，调用时直接触发类型错误。
同时你违反了React组件的强制命名规范：Newtask.js中定义组件时用了小写开头的const newTask = (props) => {}，如果父组件渲染该组件时JSX标签也用了小写开头，React会直接把这个标签当成原生DOM元素解析，不会执行组件逻辑、不会正确传递props，也会导致子组件拿不到传入的函数。

其他代码隐患

除了触发报错的问题，你的代码还存在多个会导致功能异常的bug：

taskform.js的提交逻辑完全错误：按钮onClick回调默认第一个参数是合成事件对象，不是输入的文本。你定义的submithandler既没有阻止默认行为，也没有读取state中保存的输入值，直接把事件对象当成用户输入传给了父组件，就算不报错也拿不到正确的提交内容。
useHttp.js的加载状态逻辑有缺陷：你把setisLoading(false)写在了try块的末尾，一旦请求抛出错误走到catch分支，加载状态会一直停留在true，永远不会复位。
状态初始化不规范：taskform.js中调用useState控制输入框值时没有传入初始值，会导致React把输入框从非受控组件切换为受控组件，抛出警告。
无效导入：Newtask.js中导入了useCallback但全程没有使用，属于冗余代码。
变量/路径拼写错误：createTask函数中把参数task写成了tastk，自定义Hook所在的文件夹名写成了hookes（规范命名为hooks），虽然不直接触发报错，但会大幅提升后续维护的出错概率。

修复方案

修正所有拼写与规范问题：
- 把Newtask.js中的组件名改成大写开头的NewTask，父组件渲染时也用<NewTask />标签
- 解构useHttp返回值时把isloading改成isLoading，和Hook返回的字段名一致
- 把useHttp的调用、状态解构移到组件最顶部，避免变量引用顺序问题

修正taskform.js的提交逻辑，提交时从state里读取输入值：

const submithandler = (e) => {
  e.preventDefault();
  if (!text.trim()) return;
  props.onEnterTask(text);
  settext("");
};

给输入框状态设置初始值：const [text, settext] = useState("");

修正useHttp的加载状态逻辑，把setisLoading(false)放到finally块中，无论请求成功失败都会复位加载状态：

const sendRequest = useCallback(async (requestConfig, applydata) => {
  setisLoading(true);
  setError(null);
  try {
    const response = await fetch(requestConfig.url, {
      method: requestConfig.method ? requestConfig.method : "GET",
      headers: requestConfig.headers ? requestConfig.headers : {},
      body: requestConfig.body ? JSON.stringify(requestConfig.body) : null,
    });
    if (!response.ok) {
      throw new Error("Request failed!");
    }
    const data = await response.json();
    applydata(data);
  } catch (err) {
    setError(err.message || "Something went wrong!");
  } finally {
    setisLoading(false);
  }
}, []);

删除Newtask.js中冗余的useCallback导入。

内容的提问来源于stack exchange，提问作者Asit Purohit