Estoy tratando de hacer una llamada de función "sendAndMove" que involucra dos funciones internas. Y quiero que se ejecuten dos funciones en orden de configuración() ---> goHome(). Pero cuando escribí un código como el de abajo, se ejecuta como goHome() ---> setting(). Así que usé async/await para lograr el objetivo.
¿Este problema se debe a la función asincrónica y la pila de llamadas? Y quiero saber por qué la función setting() no funciona si la página cambia. Muchas gracias
function setting() { setFinalInfo((prev)=>{return{...prev, finalAddress: info.address, finalCode: info.code, finalDetailAddress: info.detailAddress, finalPostCode: info.postCode, finalExtraAddress: info.extraAddress} }); } function goHome(){ navigate("/") } function sendAndMove() { setting(); goHome(); }Así que cambié al código a continuación.
function setting() { setFinalInfo((prev)=>{return{...prev, finalAddress: info.address, finalCode: info.code, finalDetailAddress: info.detailAddress, finalPostCode: info.postCode, finalExtraAddress: info.extraAddress} }); } function goHome(){ navigate("/") } async function sendAndMove() { ***** Changed this part await setting(); await goHome(); }Lo que realmente quiere hacer es 'canalizar' desde una devolución de llamada a una promesa esperable, algo como esto:
function setting() { return new Promise((resolve) => { setFinalInfo((prev) => { resolve({ ...prev, finalAddress: info.address, finalCode: info.code, finalDetailAddress: info.detailAddress, finalPostCode: info.postCode, finalExtraAddress: info.extraAddress, }); }); }); } function goHome() { navigate('/'); } async function sendAndMove() { await setting(); goHome(); } Por cierto, no necesita esperar en goHome() ya que no es una función asíncrona.
El enfoque óptimo sería establecer el estado y luego usar useEffect para observar un cambio en el estado y luego llamar a navigate .
function update() { setFinalInfo((prev) => { return { ...prev, finalAddress: info.address, finalCode: info.code, finalDetailAddress: info.detailAddress, finalPostCode: info.postCode, finalExtraAddress: info.extraAddress } }); } useEffect(() => { navigate('/'); }, [finalInfo]),