React/Redux报错：Uncaught TypeError: _this2.props.AddToCart不是函数

看起来你在把Redux action绑定到组件props的时候出了点小问题，我帮你梳理几个最可能的原因和解决办法：

1. 确认connect方法正确绑定了action creator #

你用到了bindActionCreators，但要确保它被正确传递给connect的第二个参数（mapDispatchToProps）。如果你的代码里connect只传了第一个参数（mapStateToProps），那组件props里根本不会有AddToCart方法。

正确的写法有两种：

方式一：显式使用bindActionCreators #

const mapStateToProps = (state) => {
  return {
    itemList: state.items
  };
};

const mapDispatchToProps = (dispatch) => {
  // 把AddToCart action绑定到dispatch
  return bindActionCreators({ AddToCart }, dispatch);
};

// 一定要把mapDispatchToProps传给connect的第二个参数
export default connect(mapStateToProps, mapDispatchToProps)(ItemList);

方式二：直接传递action对象（更简洁） #

Redux的connect方法支持直接把action creator对象作为第二个参数，它会自动帮你绑定dispatch：

// 省略mapStateToProps的话，第一个参数传null
export default connect(mapStateToProps, { AddToCart })(ItemList);

2. 检查action creator的导出与导入是否匹配 #

你用import { AddToCart } from '../actions/add_to_cart';导入，要确保你的add_to_cart.js里是命名导出这个action creator：

// add_to_cart.js
export const AddToCart = (itemId) => {
  return {
    type: 'ADD_TO_CART',
    payload: itemId
  };
};

如果是默认导出（export default AddToCart），那导入的时候应该去掉花括号：import AddToCart from '../actions/add_to_cart';，否则你导入的会是undefined，自然不是函数。

3. 组件内调用方法时要通过props访问 #

在渲染列表项的时候，要确保你是调用this.props.AddToCart，而不是直接写AddToCart：

{this.props.itemList.map((item) => (
  <li 
    key={item.id} 
    onClick={() => this.props.AddToCart(item.id)}
  >
    {item.name} - 当前数量: {item.quantity}
  </li>
))}

先检查这几点，应该就能解决AddToCart is not a function的问题了。

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