0

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.

0 Answers0