Estoy atascado tratando de actualizar el estado de un carrito simple, pero no puedo hacerlo funcionar. Básicamente, cuando hago clic para actualizar el estado, parece que no se obtiene el estado inicial, solo en la segunda ronda. Entonces, ¿cómo hacer que funcione correctamente?
const { product } = props;
const [subTotal, setSubTotal] = useState(0);
const [itemQty, setItemQty] = useState(0);
const handleCart = (event) => {
const id = product.itemId;
const price = product.price;
setSubTotal(subTotal + Number(price));
setItemQty(itemQty + 1);
}
return (
<div>
<Image
src={product.url}
alt={product.title}
className="product__image"
/>
<div className="product__title">{product.title}</div>
<div className="product__price">{`$ ${product.price}`}</div>
<Button
className="product__qty-btn-p btn btn-primary"
type="button"
data-id="increase"
onClick={() => handleCart()}
id="basic-addon2"
>
Add
</Button>
</div>
)
Eso sucede porque el estado es asíncrono.
Puedes usar useEffectpara console.logese estado:
import React.{useState,useEffect} from "react"
const { product } = props;
const [subTotal, setSubTotal] = useState(0);
const [itemQty, setItemQty] = useState(0);
useEffect(() => console.log(subTotal,itemQty),[subTotal,itemQty])
const handleCart = (event) => {
const id = event.product.itemId;
const price = event.product.price;
setSubTotal(prev => {prev + Number(price)});
setItemQty(prev => {prev + 1});
}
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras