Estoy tratando de armar un contador simple que cambie la cantidad de un artículo. Usando Hooks para administrar su estado, actualizo el valor en la pantalla correctamente. Sin embargo, el valor que tiene el estado cuando i console log siempre es uno menos que el valor en la pantalla.
Por ejemplo:
Si el valor inicial es 1, después de presionar el botón más, el valor en la pantalla cambia a 2 pero en la consola el valor del estado sigue siendo 1.
Configuración de Hooks y funciones que controlan el conteo:
//Set Quantity const [quantity, setQuantity] = useState(1); //Set Item price const [itemPrice, setItemPrice] = useState(itemOptions[0].price) //Counter Control const [disableMinus, setDisableMinus] = useState(true); const addQuantity = () => { if (quantity === 1) { setQuantity(quantity + 1); setDisableMinus(false); console.log(quantity) } else { if (quantity > 1){ setQuantity(quantity + 1); setDisableMinus(false); console.log(quantity) } } } const minusQuantity = () => { if (quantity === 1){ setDisableMinus(true); } else { if (quantity > 1) { setQuantity(quantity - 1); setDisableMinus(false); console.log(quantity) } } } return ( <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: "center", paddingVertical: 20}}> <TouchableOpacity disabled={disableMinus} onPress={() => minusQuantity()}> <AntDesign style={{color: '#37BD6B'}} name="minuscircle" size={30}/> </TouchableOpacity> <Text style={{paddingHorizontal: 10, fontWeight: '700', fontSize: 30}}>{quantity}</Text> <TouchableOpacity onPress={() => addQuantity()}> <AntDesign style={{color: '#37BD6B'}} name="pluscircle" size={30}/> </TouchableOpacity> )Gracias por adelantado
Los establecedores de useState son asíncronos.
Podrías registrarlo de esta manera
useEffect(()=>{ console.log(quantity) }, [quantity] Esto significa: cuando la dependencia [quantity] cambie, ejecute la function pasada como primer parámetro
Para evitar el cierre obsoleto (que ocurre cuando se hacen 2 clics rápidos o rand randers), debe usar setters y pasarle una función en lugar del valor "actual":
setQuantity(prevQuantity => prevQuantity + 1);Aquí hay otra forma en que puede configurar las cosas:
const addQuantity = () => { ... setQuantity(oldQuantity => { const newQuantity = oldQuantity + 1 console.log(newQuantity) // console.log moved here. Also could be console.log("Incremented quantity to:", quantity) return newQantity }); ... }Este enfoque le permitiría registrar el nuevo valor de cantidad antes de establecerlo. En este enfoque, puede realizar una acción específica (en este caso, console.log) caso por caso.
Por otro lado, el enfoque useEffect en la respuesta de @Poptocrack rastreará todos los cambios en el estado de quantity . Tiene significativamente menos código y podría ser más deseable según sus necesidades.
Espero que encuentre uno que se adapte mejor a sus necesidades de los dos enfoques.