如何获得该组件的状态值是内部映射函数反应?

Question

这是一个电子商务网站的购物车页面。在这里，我想获得每个单独的计数器值的值，并将其乘以各自的价格，并将其显示为最终的结帐值。在这里，我已经硬编码了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

Answer 1

你必须在父组件中创建另一个状态来计算每个子组件的总数。你的代码看起来像这样:

import React, { useState } from 'react'
import { RiDeleteBin6Line } from "react-icons/ri"
import Counter from '../../Components/Counter/Counter'
const Products = ({ cartdetails }) => {
const [total, setTotal] = 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 setTotal={setTotal} 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'>{total}USD</div>
</div>
<div className=' flex justify-end '>
<button className=' btn w-36 font-bold'>Checkout</button>
</div>
</div>
</div>
</div>
)
}
export default Products

现在，在Counter组件中，您将更新该状态以计算总数。

<button onClick={() => {setValue(value - 1); props.setTotal(prev=>prev+value-1)}} disabled={value === 1} className={`${value === 1 && "text-gray-400"}`} ><HiOutlineMinus /></button>

Answer 2

我不知道如何从地图函数中获取状态，因为对我来说这将是相当艰巨的，但是为什么不尝试在Products中创建totalPrice状态，然后通过propDrilling setTotalPrice更改totalPrice的值Counter，这会在每次更改库存(或购物车)时更改其值。

const [totalPrice, setTotalPrice] = useState(0)
<Counter totalPrice={totalPrice} setTotalPrice={setTotalPrice} />

在柜台你可以

setTotalPrice(totalPrice + {whatever price it is for that specific increment/decrement}

让我知道它是否有效，我还没有在地图功能上尝试过。:)