为Cart组件添加一个移除按钮

Question

我有"组件使用react-redux，并希望实现一个"移除"。按钮!我试着在里面创建这个功能，但是当我点击"产品"时未被删除，并返回一个错误:"产品未定义"。我已经有一个删除按钮在另一个组件使用redux产品被删除，所以它的工作，但我想有按钮以及在quot;Cart"组件本身能够看到被删除的产品!我的购物车组件代码如下:

import React, { Component } from "react"
import { connect } from "react-redux";
import { Card, CardBody, CardHeader, CardTitle, Row, Col } from "reactstrap"
import PanelHeader from "components/PanelHeader/PanelHeader.js"
import { addCart } from "../redux/actions";
import { removeCart } from "../redux/actions";

class Cart extends Component {
render () {
const cart = this.props.cart
return (
<>
<PanelHeader size="sm" />
<div className="content">
<Row>
<Col xs={12}>
<Card>
<CardHeader>
<CardTitle tag="h4">Products List</CardTitle>
</CardHeader>
<CardBody>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col"><strong>#</strong></th>
<th scope="col"><strong>Name</strong></th>
<th scope="col"><strong>Code Item</strong></th>
<th scope="col"><strong>Quantity</strong></th>
<th scope="col"><strong>Price Total</strong></th>
</tr>
</thead>
<tbody>
{cart.length > 0 && cart.map((cart, index) => (             
<tr key={cart.id}>
<th scope="row">{index}</th>
<td>{cart.title}</td>
<td>{cart.code}</td>
<td>{cart.quantity}</td>
<td>{cart.price}</td>
</tr>))}
<span>
<button onClick ={() => (removeCart(product))}>Remove</button>
</span>
</tbody>
</table>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
)
}
}
const mapStateToProps = (state)=> {
return {
cart: state.cart
}
}
const mapDispatchToProps = (dispatch) => { 
return {
addCart: (product) => {dispatch(addCart(product))},
removeCart: (product) => {dispatch(removeCart(product))}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Cart);

提前感谢!!

Answer 1

Product没有定义，因为你的组件Product里面没有任何东西，你没有声明它，如果你想删除整个购物车，那么发送购物车的id而不是(Product)，如果你想删除购物车中的特定产品，那么你可能会发送特定产品的id而不是整个产品对象。