React报错handleSuccessfulFormSubmission is not a function排查求助

问题场景 #

跟随代码实操类作品集教程学习React，课程临近结束时在实现博客条目编辑功能模块遇到无法定位触发原因的报错，具体报错信息如下：

TypeError: _this4.props.handleSuccessfulFormSubmission is not a function

初步排查记录：

• 最初怀疑是2018年发布的旧教程未更新，存在React API兼容问题，但此前200小时的学习过程中从未遇到此类重大卡点
• 排查后发现报错的表单组件BlogForm在站点内共两处复用：
  • 第一处为新建博客文章页面，功能运行完全正常
  • 第二处为当前博客编辑场景，仅在该场景下抛出上述错误
• 旧版教程中对应写法可正常运行，无法确认当前React版本下该写法是否合法

复现代码 #

抛出错误的子组件 BlogForm 核心代码

constructor(props) {
  super(props);
};

handleSubmit(event) {
  // 省略接口请求前置逻辑
  this.props.handleSuccessfulFormSubmission(response.data.portfolio_blog);
    })
    .catch((error) => {
      console.log("handleSubmit for blog error", error);
    });

  event.preventDefault();
}

报错场景父组件 BlogDetail 核心代码

export default class BlogDetail extends Component {
  constructor(props) {
    super(props);
  }

  render (
      return (
          <BlogForm
            // 省略其他无关props
          </BlogForm>
        );
)
}

正常运行场景父组件 BlogModal 核心代码

export default class BlogModal extends Component {
  constructor(props) {
    super(props);
  }

  handleSuccessfulFormSubmission(blog) {
    this.props.handleSuccessfulNewBlogSubmission(blog);
  }

  render() {
    return (
      <BlogForm
        handleSuccessfulFormSubmission={this.handleSuccessfulFormSubmission}
      </BlogForm>
    );
  }
}

报错根因 #

该报错和React版本兼容性没有任何关系，是组件复用时漏传必填props导致的。
对比两处父组件调用BlogForm的代码可以直接定位差异：

• 正常运行的BlogModal调用BlogForm时，显式传入了handleSuccessfulFormSubmission回调方法作为prop，表单提交时调用该方法可以正常执行
• 报错的BlogDetail调用BlogForm时，仅传入了其他无关props，完全没有传递handleSuccessfulFormSubmission。表单提交触发handleSubmit逻辑时，this.props.handleSuccessfulFormSubmission的值为undefined，调用undefined类型的值自然会抛出“不是一个函数”的类型错误。

额外提示：贴出的BlogDetail代码存在基础语法错误，类组件的render是类方法，正确写法为render() { return /* JSX内容 */ }，当前写的render ( return (...) )不符合类方法定义规范，会直接触发语法报错。

修复方案 #

根据编辑场景的实际业务需求二选一即可：

• 若编辑场景表单提交成功后需要执行后续逻辑：在BlogDetail组件内定义对应的提交成功处理方法，和BlogModal的写法保持一致，将该方法作为handleSuccessfulFormSubmissionprop传递给BlogForm
• 若编辑场景提交成功后不需要执行额外回调逻辑：给BlogForm组件添加props默认值做兜底，避免空值调用报错，示例代码：

// 为BlogForm组件添加默认props配置
BlogForm.defaultProps = {
  handleSuccessfulFormSubmission: () => {}
}

内容的提问来源于stack exchange，提问作者Lee Knorpp