我的代码想要实现的是,当我单击递增按钮时,递增值“quantityCount”用于乘以对象“sellingPrice”,但我得到的是,“quantityCount”的初始值乘以“sellingPrice”,但当我增加计数“quantityCount”时,它不会动态地乘以“sellingPrice”对象,如控制台中所示。我真的很感激你的帮助,谢谢。
const [productName, setProductName] = useState("");
const [sellingPrice, setSellingPrice] = useState(0);
const [quantityCount, setQuantityCount] = useState(0);//useState Variable handling my Increment and Decrement
const [newItems, setNewItems] = useState([])
const enterProductName = (e) =>{
setProductName(e.target.value);
}
const enterSellingPrice = (e) =>{
let sellingPricePerEach = e.target.value
setSellingPrice(sellingPricePerEach * quantityCount);
console.log(sellingPricePerEach * quantityCount);
}
let handleSaveItem = () => {
const newItemData = {productName, sellingPrice,quantityCount};
setNewItems([...newItems, newItemData]);
console.log(newItemData);
let incrementQuantity = () =>{
setQuantityCount(quantityCount+ 1);
//console.log(quantityCount+ 1);
}
let decrementQuantity = () =>{
setQuantityCount(quantityCount- 1);
// console.log(quantityCount- 1);
}
//JSX
<div>Items</div>
{newItems.map((items)=>{
const {productName,sellingPrice, quantityCount} = items;
return(
<>
<div>
<div><div>{productName}</div>
<div>{sellingPrice}</div>
</div>
<div><FontAwesomeIcon icon={faTrashCan} /></div>
</div>
</>
);
})}
//JSX
<div>Quantity</div>
<div>
<FontAwesomeIcon icon={faPlus} onClick={incrementQuantity}/>
{quantityCount}
<FontAwesomeIcon icon={faMinus} onClick={decrementQuantity}/></div>
`
1条答案
按热度按时间rks48beu1#
Jacob已经回答了这个问题,下面是扩展他的评论的答案--使用
useEffect
它在原始逻辑中不起作用的原因是状态保持不变(在本例中为
quantityCount
),直到下一次渲染。这就是为什么当你点击“Increment”时,使用的quantityCount
仍然是旧的,而不是你期待的更新的。在这种情况下,我们需要一种方法来“监视”
quantityCount
,以便当quantityCount
发生变化时,我们可以更新sellingPrice
。这可以通过在组件中添加以下行来实现--
(无关--
useReducer
是另一种用于递增和递减状态的技术,但对于该组件中的简单状态管理来说,它有点矫枉过正)