Oops, mis amigos, tengo este "problema" cuando uso setState, como setState no es asíncrono, no puedo usarlo de la manera que quiero. Establecí el valor y cuando llamo a la función para devolver el valor regresa con "retraso". ¿Cómo resuelvo esto?
const [quantityProduct, setQuantityProduct] = useState<number>(0); function addQuantity() { var soma = Number(quantityProduct) + 1; setQuantityProduct(soma); sendProduct() } function sendProduct() { console.log(quantityProduct) }El problema es que las siguientes dos líneas son asíncronas. Lo que experimenta es que la segunda línea se ejecuta antes de completar la primera.
setQuantityProduct(soma); sendProduct(); Quería llamar a sendProduct cuando se actualice la quantityProduct . Debería usar el gancho useEffect con quantityProduct en la matriz de dependencia.
Prueba como a continuación.
const [quantityProduct, setQuantityProduct] = useState<number>(0); function addQuantity() { var soma = Number(quantityProduct) + 1; setQuantityProduct(soma); } function sendProduct() { console.log(quantityProduct); } useEffect(() => { sendProduct(); }, [quantityProduct]); Segunda forma: llamando a la API dentro de la devolución de llamada setState
function addQuantity() { setQuantityProduct((prevQuantity) => { var newQuantity = Number(prevQuantity) + 1; sendProduct(newQuantity); return newQuantity; }); }"setState no es asíncrono"
Esto no es cierto. La documentación es clara en esto :
React puede agrupar varias llamadas setState() en una sola actualización para mejorar el rendimiento. Debido a que this.props y this.state pueden actualizarse de forma asíncrona, no debe confiar en sus valores para calcular el siguiente estado.
Debe usar el useEffect para observar cambios en el estado (pasar el estado que desea observar en una matriz de dependencia) y luego realizar una operación basada en ese cambio.
const [quantityProduct, setQuantityProduct] = useState(0); function addQuantity() { const soma = Number(quantityProduct) + 1; setQuantityProduct(soma); } function sendProduct() { console.log(quantityProduct); } useEffect(() => { sendProduct(); }, [quantityProduct]);