添加mapDispatchToProps后React-Redux组件报错：TypeError: this.props.getProducts is not a function的求助

嘿，我来帮你排查这个问题！咱们一步步拆解：

错误根源分析 #

你遇到的TypeError本质是两个原因叠加导致的：

1. 当你给connect传入**对象形式的mapDispatchToProps**后，Redux不再会自动把dispatch方法注入到组件的props中了，所以你在componentDidMount里调用的this.props.dispatch(getProducts())会失效。
2. 你只把addToCart加入了mapDispatchToProps，但没把getProducts也加进去，自然this.props.getProducts也不是一个可用的函数。

具体修复步骤 #

1. 更新mapDispatchToProps，包含所有需要的Action Creator #

把getProducts也添加到mapDispatchToProps对象中，这样Redux会自动把它包装成可直接调用的props方法：

const mapDispatchToProps = { getProducts, addToCart };

2. 修改componentDidMount的调用方式 #

不再依赖dispatch，直接调用props里的getProducts方法：

componentDidMount() {
  this.props.getProducts(); // 直接调用包装好的action方法
  let getValue = localStorage.getItem("userData");
  this.setState({
    getValue: JSON.parse(getValue),
  });
}

3. 修复表单提交的潜在问题 #

你的表单里用了type="hidden"的输入框并绑定了onChange事件，但隐藏输入框不会触发change事件，这会导致你提交时state里的pid、pname等字段都是空值。建议直接在提交时从当前商品对象取数据，比如：

第一步：修改渲染时的按钮事件

假设你是在遍历products列表渲染商品，把当前商品对象传递给提交方法：

// 假设render里的商品遍历逻辑是这样的
{this.props.products.map(product => (
  <div key={product._id}>
    {/* ...其他商品展示代码 */}
    <form>
      {/* 移除所有hidden输入框 */}
      <button 
        type="button" 
        className="pro-btn" 
        onClick={() => this.handleSubmit(product)}
      >
        <i className="icon-basket"></i>
      </button>
    </form>
  </div>
))}

第二步：更新handleSubmit方法

直接用传入的商品对象构建提交数据：

handleSubmit = (product) => {
  const email = this.state.getValue?.email; // 可选链避免空值报错
  const CartData = {
    pid: product._id,
    pname: product.pname,
    pprice: product.pprice,
    pimg: product.pimg,
    qty: 1,
    total_price: product.pprice
  };
  this.props.addToCart(CartData);
};

额外检查项 #

• 确保你的getProducts和addToCart都是正确的Redux Action Creator（要么返回带type的对象，要么是适配redux-thunk的异步函数）。
• 确认你的Redux Store已经正确配置了对应的Reducer，能处理这两个Action。

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