reactjs 如何使用处理递增和递减的useState变量执行计算

edqdpe6u  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(116)

我的代码想要实现的是,当我单击递增按钮时,递增值“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>
`
rks48beu

rks48beu1#

Jacob已经回答了这个问题,下面是扩展他的评论的答案--使用useEffect
它在原始逻辑中不起作用的原因是状态保持不变(在本例中为quantityCount),直到下一次渲染。这就是为什么当你点击“Increment”时,使用的quantityCount仍然是旧的,而不是你期待的更新的。
在这种情况下,我们需要一种方法来“监视”quantityCount,以便当quantityCount发生变化时,我们可以更新sellingPrice
这可以通过在组件中添加以下行来实现--

useEffect(()=>{
  if (quantityCount === 0) return // safeguard invalid value
  setSellingPrice(quantityCount * sellingPrice)
}, [quantityCount])

(无关--useReducer是另一种用于递增和递减状态的技术,但对于该组件中的简单状态管理来说,它有点矫枉过正)

相关问题