0

I am building an app using react native, it has a map screen which displays custom markers, the markers are stored on a firbase I created the function to fetch the data and store it into the state using an useEffect hook but it seems that the state is only storing half of it

import React, { useEffect, useState } from 'react'
import { Container, StyledMapView } from './MapScreen.styles'
import { CustomMarker, useMapScreen } from './useMapScreen'
import { RoundButton } from '../../components/RoundButton'
import { MapSearchBar } from '../../components/MapSearchBar'
import { DestinationModel } from '../../components/DestinationModel'
import { Hamburger } from '../../components/Hamburger'
import { Marker } from 'react-native-maps'
import { MarkerCard } from '../../components/MarkerCard'
import { retrieveData } from '../../storage/firestore/LocationReader'

export const MapScreen = () => {
    const [fetchedData, setFetchedData] = useState<CustomMarker[]>([])
    useEffect(() => {
        const fetchDataAndStoreInState = async () => {
            const data = await retrieveData();
            console.log(data)
            console.log("DATA PRINTED")
            setFetchedData(data)
            console.log(fetchedData)
        };

        fetchDataAndStoreInState();
    }, []);

    const { models, operations } = useMapScreen()

    return (
        <Container>
            <StyledMapView
                ref={models.mapRef}
                showsUserLocation
                // onUserLocationChange={operations.handleUserLocationChange}
                showsMyLocationButton={true}
            >
                {fetchedData &&
                    fetchedData.map((marker) => {
                        console.log(models.selectedId)
                        if (
                            marker &&
                            marker.location &&
                            marker.location.latitude !== undefined &&
                            marker.location.longitude !== undefined &&
                            marker.event_name &&
                            marker.event_desc &&
                            models.selectedId !== undefined &&
                            (models.selectedId == marker.event_type)
                        ) {
                            console.log(marker.event_name)
                            return (
                                <Marker
                                    key={marker.id}
                                    coordinate={{
                                        longitude: marker.location.longitude,
                                        latitude: marker.location.latitude,
                                    }}
                                    title={marker.event_name}
                                    description={marker.event_desc}
                                    // Assuming 'image' is a URL object
                                    image={marker.image}
                                    onPress={() => operations.setSelectedMarker(marker)}
                                />
                            );
                        }
                        return null;
                    })}
                {models.markerCard &&
                    models.selectedMarker &&
                    <MarkerCard
                        closeMarkerCard={operations.closeMarkerCard}
                        disabled={models.markerCard}
                        marker={models.selectedMarker}
                    />
                }
            </StyledMapView>
            <RoundButton icon="ios-menu-outline" onPress={operations.closeHamburger} />
            <MapSearchBar onPress={operations.handleMapSearchBarPress} />
            <DestinationModel visible={models.modelVisible} closeModel={operations.closeDestinationModel} />
            <Hamburger disabled={models.hamVisible} closeHam={operations.closeHamburger} />
        </Container>
    )
}

This is not good code, I am using react native for the first time. Any help is apprecieted

I have been trying to use different ways to store it on to the state, like making the state in another file or checking if the state has the required number of entires before rendering but all is failing

  • 1
    `console.log(fetchedData)` won't show the updated data because of [this](https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately). In your JSX map, have you tried replacing `console.log(models.selectedId)` with `console.log(marker)` to make sure your markers have all the attributes they need to render? Also check [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), can shorten your conditionals – Abe Aug 23 '23 at 23:13

0 Answers0