道具未定义 React.js

Question

我正在用 React.js 准备一个电子商务页面。我使用 Mock Api 作为 api 服务。我成功拉取了数据，但是当我尝试将产品添加到购物车时，遇到了“道具”错误。

我将产品添加到购物车的功能：

handleClick() {
        props.dispatch(addProductToCart({...this.props.product}))
    }

这是我返回 Product.js 文件夹中按钮的部分：

Product.js 是使用类组件编写的。

return(
<div>
<button onClick= {this.handleClick}>
        Add to cart
    </button>
</div>
)

我在我的 ProductDetail.js 文件中调用了这个函数，如下所示：

const onCart = () => {
        props.dispatch(addProductToCart(this.props.product));
    };

错误输出：

Failed to compile
./src/components/Product/Product.js
Line 19: 'props' is not defined no-undef
Line 20:  'props' is not defined no-undef

似乎在 addProductToCart 方法内部时无法读取道具 onCart，我不确定是什么原因造成的