移除类组件中的函数

Question

我正在创建一个商店，我已经将添加到"购物车"中的物品堆叠并移除。组件!我已经设法使用React-Redux添加项目，但无法创建一个函数，将删除"已添加的项目"。在"Cart"里面。如果有人可以帮助创建这个功能，以便从产品中删除每个项目或清空整个购物车，我会很感激:我的购物车组件代码如下:

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

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>))}
<td><button onClick ={() => removeItemFromCart()} className="btn btn-danger cart-button px-4">Remove</button></td>
</tbody>
</table>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
)
}
}

const mapStateToProps = (state)=> {
return {
cart: state.cart
}
}
const mapDispatchToProps = (dispatch) => { 
return {
addCart: (product) => {dispatch(addCart(product))}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Cart);

提前感谢!P.S.我需要mapStateToPros和mapDispatchToProps实际上为代码工作吗?我试图将其转换为一个简单的购物车组件，并返回一个错误。是因为Redux的语法吗?

Answer 1

我的reducer文件如下:

import { ADD_TO_CART } from './constants'
import { REMOVE_FROM_CART } from './constants'

const initialState = {
cart: [],
}
const ShoppinReducer = (state = initialState, action) => {

switch (action.type) {

case ADD_TO_CART:
const newCart = [...state.cart]

newCart.push(action.payload)
return {
...state,
cart: newCart
}
case REMOVE_FROM_CART:
return {
...state,
cart: []
}
default:
return state
}
}
export default ShoppinReducer