bindActionCreators未生成函数：props.goToBook非函数报错排查

问题回顾 #

你提到在连接React组件并绑定actionCreators时，调用goToBook函数总是返回undefined，触发报错：

Uncaught TypeError: this.props.goToBook is not a function at RoutingDnD.onPassBook (bundle.js:42656) at onClick (bundle.js:42457) at HTMLUnknownE...

而且这个绑定模式在另一个组件能正常工作，只是在使用react-table触发点击事件时出问题，即使把Redux action调用放在表格外部也无法解决。

可能的原因及解决方案 #

1. 检查Redux组件连接配置是否正确

首先要确认RoutingDnD组件是否正确通过connect方法绑定了actionCreators。正确的连接逻辑应该是这样的：

import { connect } from 'react-redux';
import { goToBook } from './yourActionCreatorsPath';

class RoutingDnD extends React.Component {
  // ...组件内部逻辑
  onPassBook() {
    this.props.goToBook(/* 传递所需参数 */);
  }
  // ...
}

// 把actionCreator映射到组件props
export default connect(null, { goToBook })(RoutingDnD);

• 别漏写connect的第二个参数（mapDispatchToProps），直接传入{ goToBook }是简写语法，会自动把这个actionCreator绑定到dispatch后注入props。
• 如果是自定义mapDispatchToProps函数，要确保正确返回包含goToBook的对象：

const mapDispatchToProps = dispatch => ({
  goToBook: (bookData) => dispatch(goToBook(bookData))
});

2. 确认onPassBook方法的this绑定是否正确

在React类组件中，事件回调方法很容易出现this指向丢失的问题，导致this.props无法正确指向组件的props对象，自然找不到goToBook函数。

解决this绑定的三种常用方式：

• 在构造函数中手动绑定：

constructor(props) {
  super(props);
  this.onPassBook = this.onPassBook.bind(this);
}

• 用箭头函数定义组件方法：

onPassBook = () => {
  this.props.goToBook(/* 参数 */);
}

• 在事件调用时用箭头函数包裹：
  比如在react-table的点击事件中：

// 示例：表格单元格的点击事件绑定
<Cell onClick={() => this.onPassBook()} />

3. 检查是否误导出了未连接Redux的原始组件

有时候会不小心导出了未经过connect包装的原始组件，导致Redux的actionCreator根本没注入props。比如：

// ❌ 错误：导出了未连接的原始组件
export default RoutingDnD;
// ✅ 正确：导出经过Redux连接后的组件
export default connect(null, { goToBook })(RoutingDnD);

确保在使用RoutingDnD的地方，导入的是经过Redux连接后的版本。

4. 验证actionCreator本身的定义是否正确

虽然你说另一个组件能正常使用，但还是可以快速检查下goToBook的定义，确保它是一个返回action对象的函数：

// yourActionCreators.js
export const goToBook = (bookId) => ({
  type: 'GO_TO_BOOK',
  payload: bookId
});

如果是异步action（比如使用redux-thunk中间件），要确保它是返回函数的函数，且Redux store已正确配置对应中间件。

额外排查技巧 #

可以在RoutingDnD的componentDidMount生命周期中打印this.props，直观确认goToBook是否存在：

componentDidMount() {
  console.log('当前组件props:', this.props);
}

如果打印结果里没有goToBook，说明是Redux连接环节出了问题；如果有但调用时报错，那大概率是this指向的问题。

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