React+Redux项目mapDispatchToProps注入函数报非函数错误咨询

核心问题定位 #

问题与Redux的连接配置无关，根源在容器组件向子组件透传props的环节，和报错逻辑完全对应：

• 被connect包裹的ResearchContainer，在向子组件CompanyFinancials传值时，把从Redux拿到的所有props（包括searchCompany、getResearchCompany、researchCompany）整体打包，作为一个名为props的自定义属性传入子组件：

  // 错误的传参写法
  return <CompanyFinancials test={this.handleTest} props={this.props} />
  

• 这种传参方式下，Redux注入的方法在子组件内的实际访问路径是this.props.props.searchCompany，但子组件代码直接从顶层this.props解构searchCompany，自然会抛出“this.props.searchCompany is not a function”的错误。控制台输出的props结构也可验证：所有Redux注入的属性都嵌套在子组件的props字段下，没有暴露在子组件的顶层props中。

修复操作 #

1. 修改容器组件的props透传逻辑，直接展开Redux注入的属性传给子组件，取消嵌套打包：

   class ResearchContainer extends React.Component {
       render() {
           // 展开所有props直接透传
           return <CompanyFinancials {...this.props} test={this.handleTest} />
       }
   }
   

2. 完成透传后，子组件内的解构逻辑const { researchCompany, searchCompany } = this.props即可正常获取对应值，按钮绑定的点击事件也能正常调用方法。

注意事项 #

• 禁止在JSX中自定义名为props的prop，这个命名会和组件本身的this.props概念混淆，极易引发传值路径错误。
• 当前提交按钮已设置type="submit"，本身会触发表单的onSubmit逻辑，可将searchCompany的调用从按钮的onClick事件挪到Formik的onSubmit回调中，避免重复触发请求：

  onSubmit={(values, { setSubmitting }) => {
      searchCompany(values.tickerInput.toUpperCase());
      setSubmitting(false);
  }}
  

内容的提问来源于stack exchange，提问作者Jacob Richardson