Блог

Я построил интернет-магазин и пытаюсь найти правильный способ отображения промежуточного итога на UI…My код для «Корзины», в которую я хочу поместить функцию, вычисляющую промежуточный итог, выглядит следующим образом:

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

и мой файл редактирования, где 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 для достижения промежуточного результата, однако я опубликовал его для любых предложений! Имейте в виду, что код:

 const subtotal = (cartProducts.quantity * cartProducts.price).toFixed(2);
 

не работает, поэтому я пытаюсь найти другой метод!
Спасибо за любую помощь!

Я нашел, в чем дело, и обновил свой вопрос ответом для дальнейшего использования:

Синтаксис был очень прост:

 <td>{cartProduct.price * cartProduct.quantity}</td>
 

Однако с помощью этого кода получил NaN в моем пользовательском интерфейсе. Итак, мне пришлось изменить свой массив объектов. У меня был знак $ перед ценой товара в корзине, поэтому он возвращал мне каждый раз, когда я нажимал AddToCart на NaN. Удалив из CartProducts знак$, код, который я опубликовал выше, сработал просто отлично!