引入mapDispatchToProps后CoursesPage的createCourse为undefined报错如何解决

Warning: Failed prop type: The prop createCourse is marked as required in CoursesPage, but its value is undefined

问题根因 #

• mapDispatchToProps未正确声明导出createCourse字段，或字段命名和CoursesPage.propTypes中声明的必填prop不一致
• 调用connect高阶组件时未将mapDispatchToProps作为第二个参数传入，或第一个参数未用null占位（无mapStateToProps的场景），导致redux未将action creator注入组件props
• 导入createCourse对应的action creator时路径错误，或拼写错误导致拿到的是undefined

修复方案 #

1. 校验mapDispatchToProps定义，确保返回对象包含createCourse字段，值为正确绑定dispatch的action creator

// 正确写法示例
import { createCourse } from '../../store/courseActions';

const mapDispatchToProps = dispatch => {
  return {
    createCourse: courseFormData => dispatch(createCourse(courseFormData))
  }
}

2. 校验connect调用的参数顺序，mapDispatchToProps必须作为第二个参数传入，无mapStateToProps时第一个参数传null占位

// 错误写法：漏传第二个参数
export default connect(mapStateToProps)(CoursesPage)
// 正确写法：传入两个参数
export default connect(mapStateToProps, mapDispatchToProps)(CoursesPage)
// 无mapStateToProps的场景
export default connect(null, mapDispatchToProps)(CoursesPage)

3. 如果你使用mapDispatchToProps对象简写语法，确保对象键名和要求的prop名完全匹配

// 简写语法正确示例，redux会自动为action creator绑定dispatch
import { createCourse } from '../../store/courseActions';
export default connect(mapStateToProps, { createCourse })(CoursesPage)

4. 清理CoursesPage.propTypes中遗留的dispatch必填校验规则，避免冗余报错

内容的提问来源于stack exchange，提问作者Bob Sanders