I'm working on a react-native project in which I have to fetch data from mapboxApi geocoding(Bus stations). I successfully got the results and coordinates; but when I use useState to set new results to my variable and map them, I only get the same first results several times, I checked multiple articles working with useState and useEffect, but none of them seemed to properly work. Here is my code
`
const NearbyBusStations = () => {
const [busData, setBusData] = useState({});
const [coords, setCoords] = useState([8.701811, 49.41282]);
const camRef = useRef(null);
const mapRef = useRef(null);
const hasCoords = () => coords[0] !== 0 && coords[1] !== 0;
useEffect(() => {
async function fetchBusStations() {
let markers = [];
axios
.get(
`https://api.mapbox.com/geocoding/v5/mapbox.places/bus.json?type=poi&proximity=8.69079,49.40768&access_token=pk.eyJ1IjoiZmplcmJpZW5naW5lZXIiLCJhIjoiY2w5aWljMmZyMW80djNvbDlsamd6ZzR3MyJ9.kzHdzhk5nLcBMwDRVnUF-g`,
)
.then(response => {
markers.push(response.data.features[0].geometry.coordinates);
response.data.features.forEach(coord => {
setBusData(coord.geometry.coordinates);
console.log('Displaying Data', busData);
});
});
}
fetchBusStations();
}, []);
return (
<>
<StatusBar barStyle="dark-content" />
<View style={styles.page}>
{hasCoords() ? (
<View style={styles.container}>
<KeepAwake />
<MapboxGL.MapView
style={styles.map}
zoomEnabled={true}>
<MapboxGL.Camera
zoomLevel={4}
animationMode={'flyTo'}
animationDuration={6000}
centerCoordinate={coords}
ref={camRef}
/>
</MapboxGL.MapView>
</View>
) : (
<View style={styles.container}>
<Text style={styles.info}>
</Text>
</View>
)}
</View>
</>
);
};
` Getting the same reslts, because busData is not updating
I checked every article and some random examples but none of them seems to be working, I changed the code structure of my project multiple times but I get the same results.