React setState 计数器函数表现得很奇怪

Question

我无法在 React 中实现简单的计数器更新。我有一个数量状态来更新我的 shopify 购物车。有递增递减函数。一开始，数量设置为 0。单击添加按钮时，它会触发增量函数，其中数量变量会正确更新，即显示 1。但是当我控制台记录它时，它显示初始 0 值，并且还会导致将 0 件商品添加到购物车的后端出错。但是，如果我将 2 件或更多商品添加到数量中，然后单击“立即购买”，它会像往常一样使用正确的标识和递增或递减函数更新购物车。这个问题只发生在从 0 到 1 的第一个增量中。为什么控制台日志不显示更新的值，为什么设置状态不实际更改后端的数量？我该如何解决这个问题？

这是我的一些代码： 分量 -

const Subblueminal = () => {
const { addItemToCheckout, updateCheckout, checkout } = useContext(Context);
const [quantity, setQuantity] = useState(0)

   function Decrement() {
      setQuantity(prevQuantity => prevQuantity - 1) 
      if (checkout.lineItems.length > 0) {
         updateCheckout(checkout.lineItems[0].id, quantity)
      }
      console.log('sub: ' + quantity)
      }
   
   function Increment() {
      setQuantity(prevQuantity => prevQuantity + 1)
      addItemToCheckout(product.variants[0].id, quantity)
      setError(false)
      console.log('add: ' + quantity)
   }
   
  return (
   <div className="action">
            <div className="quantity-select">
               <button onClick={Decrement} className='sub'>-</button>
               <p className='quantity'>{quantity}</p>
               <button onClick={Increment} className='add'>+</button>
            </div>
            <button onClick={() => {
               if (quantity > 0) {
                  updateCheckout(checkout.lineItems[0].id, quantity)
                  openSizeUpdate()
               }
            }} className="buy">(BUY NOW)</button>
         </div>
)

}

上下文-

 addItemToCheckout = async (variantID, quantity) => {
      const itemToAdd = [{
         variantId: variantID,
         quantity: parseInt(quantity)
      }]
      const checkout = await client.checkout.addLineItems(this.state.checkout.id, itemToAdd)
      this.setState({ checkout: checkout })
      console.log(checkout.lineItems);
   }

   updateCheckout = async (variantID, quantity) => {
      const lineItemsToUpdate = [
         {id: variantID, quantity: quantity}
       ];
      const checkout = await client.checkout.updateLineItems(this.state.checkout.id, lineItemsToUpdate)
      this.setState({ checkout: checkout })
      // console.log(checkout.lineItems);
   }

Answer 1

我有同样的问题。您是否设法找到解决方案？如果可以，请在这里更新。谢谢