这是一个电子商务网站的购物车页面。在这里，我想得到每个单独的计数器值的值，并乘以各自的价格，并显示到最终结帐值。在这里，我硬编码160美元，但我想使其动态。我怎么做，或什么将是最好的方法来实现这一点。
我的购物车页面

import React, { useState } from 'react'
import { RiDeleteBin6Line } from "react-icons/ri"
import Counter from '../../Components/Counter/Counter'

const Products = ({ cartdetails }) => {
    const [value, setValue] = useState()
    return (
        <div className=' grid grid-cols-12 gap-4'>
            {cartdetails.length === 0 ?
                <div>No items in cart</div>
                :
                <div className=' col-span-8'>
                    {
                        cartdetails.map((data, index) => {
                            return (
                                <div className=' bg-gray-100 px-4 my-4 py-4'>
                                    <div className=' flex justify-between'>
                                        <img className=' w-24 h-24' src={data.productdetails.image} alt="" />
                                        <div className=''>
                                            <div className=' font-semibold text-lg'>
                                                {data.productdetails.name}
                                            </div>
                                            <div className=' text-gray-400 text-sm'>
                                                Color : {data.cartItems.color}
                                            </div>
                                        </div>
                                        <div>
                                            <div className='font-semibold text-lg'>${data.productdetails.price} USD</div>
                                            <div className='text-gray-400 text-sm'>Price</div>
                                        </div>

                                        <div>
                                            <div className=' font-semibold text-lg'>{data.productdetails.stock}</div>
                                            <div className='text-gray-400 text-sm'>In Stock</div>

                                        </div>
                                        <button className=' h-fit text-gray-400'>
                                            <RiDeleteBin6Line />
                                        </button>
                                    </div>

                                    <Counter count={data.cartItems.quantity} {...data.productdetails} />
                                
                                </div>
                            )
                        })
                    }
                </div>
            }

            <div className=' col-span-4  my-4  '>
                <div className=' px-4 py-8 flex flex-col gap-8 bg-gray-100'>
                    <div className=' flex  justify-between'>
                        <div className=' font-bold'>Total</div>
                        <div className=' font-semibold'>$160USD</div>
                    </div>
                    <div className=' flex justify-end '>
                        <button className=' btn w-36 font-bold'>Checkout</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Products

计数器组件

import React, { useState } from 'react'
import { HiOutlineMinus } from "react-icons/hi"
import { GoPlus } from "react-icons/go"
import { incrementItem, decrementItem } from '../../redux/cart/changeCartNumber'
import { useSelector, useDispatch } from 'react-redux'

const Counter = ({ count, stock, _id }) => {

    const [value, setValue] = useState(count)
    return (
        <div className='flex font-bold text-xl justify-end'>
            <div className=' flex gap-4 bg-white p-2 w-40 justify-between '>
                {/* <button className={`${state.value === 1 && "text-gray-400"}`} disabled={state.value === 1} onClick={() => dispatch(decrementItem({ _id, count }))}><HiOutlineMinus /></button> */}
                <button onClick={() => setValue(value - 1)} disabled={value === 1} className={`${value === 1 && "text-gray-400"}`} ><HiOutlineMinus /></button>
                <div>
                    {value}
                </div>
                <button onClick={() => setValue(value + 1)} disabled={value === stock} className={`${value === stock && "text-gray-400"}`}><GoPlus /></button>
            </div>
        </div>
    )
}

export default Counter