为 Cart 组件添加移除按钮

Question

I have the "Cart" component using react-redux and want to implement a "Remove" button in the component! I tried create the function within however when I click it "products" are not be removed and returning an error: "product is undefined". I have alerady a remove button in another component where using redux the product been removed so it works, however I want to have the button as well in the "Cart" component its self to be able to see the products that been removed! My cart component code is the following:

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);

Thank you in advance!!!

Answer 1

产品未定义，因为您的组件中没有任何名为产品的内容，您尚未声明它，如果您想删除整个购物车，则发送购物车的 id 而不是（产品），如果您想删除购物车内的特定产品，那么您可能会发送特定产品的 ID，而不是整个产品对象。