javascript - 在 React-Redux 中计算 SubTotal
问题描述
我建立了一个 eshop 并试图找到在 UI 上显示 SubTotal 的正确方法......我想要放置计算 SubTotal 的函数的“购物车”代码如下:
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";
import { removeCart} from "../redux/actions";
class Cart extends Component {
removeFromCart = (product) => {
const cartProducts = this.props.cart
const updatedCartProducts = cartProducts.filter(item => item.id !== product.id);
}
render () {
const cartProducts = this.props.cart
const subtotal = (cartProducts.quantity * cartProducts.price).toFixed(2);
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</strong></th>
<th scope="col"><strong>Sub Total</strong></th>
</tr>
</thead>
<tbody>
{cartProducts.map((cartProduct, index) => (
<tr key={cartProduct.id}>
<th scope="row">{index +1}</th>
<td>{cartProduct.title}</td>
<td>{cartProduct.code}</td>
<td>{cartProduct.quantity}</td>
<td>{cartProduct.price}</td>
<td>{subtotal}</td>
<td><button onClick ={() => this.props.removeCart(cartProduct)} className="btn btn-danger cart-button px-4">Remove</button></td>
</tr>))}
</tbody>
</table>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
)
}
}
const mapStateToProps = (state)=> {
return {
cart: state.cart
}
}
const mapDispatchToProps = (dispatch) => {
return {
removeCart: (product) => {dispatch(removeCart(product))}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Cart);
和我的 redux 文件,其中 addToCart 和 removeFromCart 如下:
import { ADD_TO_CART } from './constants'
import { REMOVE_FROM_CART } from './constants'
// import { ADD_QUANTITY} from './constants'
// import { SUB_QUANTITY} from './constants'
// import { EMPTY_CART} from './constants'
const initialState = {
cart: [],
}
const ShoppinReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TO_CART:
let newCart = [...state.cart]
let itemIndex = state.cart.findIndex(obj => obj.id === action.payload.id)
let currItem = state.cart[itemIndex]
if (currItem) {
currItem.quantity = parseInt(currItem.quantity) + 1
state.cart[itemIndex] = currItem
newCart = [...state.cart]
}
else {
newCart = newCart.concat(action.payload)
}
return {
cart: newCart
}
case REMOVE_FROM_CART:
const cart = [...state.cart]
const updatedCart = cart.filter(item => item.id !== action.payload.id)
return {
...state,
cart: updatedCart
}
default:
return state
}
}
export default ShoppinReducer
我知道最好不要使用 redux 来实现 SubTotal 但是我发布它是为了提供任何建议!请记住该代码:
const subtotal = (cartProducts.quantity * cartProducts.price).toFixed(2);
不工作,所以我试图找到另一种方法!谢谢你的帮助!
解决方案
我发现出了什么问题,并用答案更新了我的问题以供将来参考:
语法非常简单:
<td>{cartProduct.price * cartProduct.quantity}</td>
但是,使用此代码在我的 UI 上收到 NaN。所以,我不得不改变我的对象数组。我在 CartProduct 价格前面有一个 $ 符号,所以每次我点击 addToCart 时都会返回我的 NaN。通过从 CartProducts 中删除 $ 符号,我在上面发布的代码工作得很好!
推荐阅读
- scala - 如何在 (x)ubuntu 20.04 上安装独立的 Scala Spark
- python - Python/pandas:如何正确读取带有编码“cp1252”的西里尔文文本的 csv 文件?
- stock - 如何处理股票数据中的缺失柱?
- c++ - 使用 str += "A" 或 str = str + "A" 的字符串 concat 之间的性能差异
- simulation - ANYLOGIC - 在特定间隔的日志中剪切数据
- python - Python TigerGraph GSQL的问题-多行字符串中的EOF
- android - 如何获取 Firebase 的系统时间戳?在科特林
- angular - 角材料 - 类型“字符串”不可分配给类型“MatSnackBarHorizontalPosition”
- calculation - CRC32 是 32 位的吗?
- javascript - Shopify 将 JS 转换为 AMP 代码格式的建议