React父子组件传值时报错props.onSubmitForm is not a function如何解决

云上老周

2026-10-4

报错原因

props.onSubmitForm is not a function 报错的核心是子组件获取到的onSubmitForm属性不是函数类型。你贴出的父子组件传值逻辑本身没有问题，报错大概率是以下几种场景导致的：

父组件引入子组件的路径错误，实际引入的不是你编写的UserDetails组件，导致传入的属性失效
项目其他位置调用了UserDetails组件，但没有传入onSubmitForm属性，或者传入的属性值不是函数
属性名拼写存在大小写错误，React的组件属性大小写敏感，比如onSubmitform和onSubmitForm会被识别为两个不同属性
子组件内对props做了解构赋值但遗漏了onSubmitForm字段（你贴出的代码中没有这个问题，可自行核对完整代码）

解决方案

先避免报错：在子组件调用props.onSubmitForm前加类型判断，先解决控制台报错问题再排查根因：

const submittedFormhandler = (event) => {
  event.preventDefault();
  let userDetails = {
    name: name,
    age: age
  };
  // 新增类型判断
  if (typeof props.onSubmitForm === 'function') {
    props.onSubmitForm(userDetails);
  } else {
    console.warn('onSubmitForm 不是有效函数，请检查传入属性', props);
  }
};

核对组件引入路径：确认DisplayDetails中引入UserDetails的路径和实际文件位置匹配，比如两个组件在同级目录下，引入路径应该是./UserDetails而非../UserDetails。
核对所有UserDetails调用位置：全局搜索项目中所有<UserDetails />的调用，确保每一处都传入了onSubmitForm属性，且属性值是一个可执行的函数。
日志调试：在子组件的提交函数里打印完整props，确认onSubmitForm是否存在、类型是否正确，就能快速定位到属性丢失的原因。