Estoy tratando de implementar una navegación paso a paso con mapbox gl js en reaccionar, estoy tratando de hacer que la posición del marcador se actualice sin problemas en lugar de que se teletransporte. Entonces, para realizar la animación, estoy tratando de llamar a una función recursivamente pero por alguna razón la misma función se comporta de manera diferente cuando se llama por segunda vez en comparación con la primera, el fragmento de código se proporciona a continuación ( logs )
const animateMarker = () => { setSteps(0); const lng = endlongitude - longitude; const lat = endlatitude - latitude; setDeltaLng(lng / numDeltas); setDeltaLat(lat / numDeltas); makeAnimation(); }; const makeAnimation = () => { let t = 0; setLatitude(latitude + deltaLat); setLongitude(longitude + deltaLng); let lat = 13.0547712; let lng = 80.1144832; const loop = () => { setTimeout(() => { lng = lng + deltaLng; lat = lat + deltaLat; console.log(lat); t++; usermarker ? .setLngLat([lng + deltaLng, lat + deltaLat]); if (t != numDeltas) { loop(); } }, 100); }; loop(); }; <!-- end snippet - <!-- begin snippet: js hide: false console: true babel: false --> > I am using normal JS variables instead of react useState because useState doesnt work in recursive state updation.This behaviour is very weird ,also I have attached the console log for the variable showing both functions running but behaving differently <button className="nav-btn" onClick={(e) => { animateMarker(); }} > navigate </button>->
`
Su función makeAnimation capturó el valor de los valores de estado cuando la llamó por primera vez, por lo que no actualizará las variables delta .
Considere usar la forma funcional del gancho setState .