react native data show on console.log but not on screen

Question

Sometimes the app working well. but I dont know why, sometimes the data from firebase give me blank screen instead of the data. after I reopen the app it work.

for example, one of my pages:

useEffect( () => {
        const subscriber =  firestore()
          .collection('Trails')
          .onSnapshot(querySnapshot => { //const querySnapshot = await firebase.firestore().collection('users').get();
            const trails = [];
            console.log('subscribe')
            if (querySnapshot)
              querySnapshot.forEach(async documentSnapshot => {
                trails.push({
                  ...documentSnapshot.data(),
                  key: documentSnapshot.id,

                });
                console.log("trails test", trails)
                
              });

            
            setTrails(trails);
            setLoading(false);
          });
        return () => {subscriber()};
      }, []);

I made useEffect to get the data from DB then show it, and same - sometimes give me blank and sometimes works well.

I want to publish the app but im not satisfying with this bug?

sorry for my English, I dont even know how to describe this problem better.

Please can anyone guide me through? maybe my useEffect not doing well?

score 1 · Answer 1 · answered Apr 28 '21 at 17:10

1

I think you should use debugging.

React native documentation

Stackoverflow question

answered Apr 28 '21 at 17:10

Yasin Tazeoglu

884
8
14

score 1 · Answer 2 · answered Apr 28 '21 at 17:19

I think there's issue with the return in useEffect return is called when componeent unmounts. here's an example how i handle async data fetching:

...
const [data, setData] = useState([]);

const isCurrentView = useRef(true);

useEffect(() => {
  if (isCurrentView.current === true) {

    const asyncFetch = async () => {
      const response = await fetch(...something) //here some Asynchronous Call Like(axios, fetch)
      setData([...response]);
    };

    asyncFetch();
  }

  return () => {
    isCurrentView.current = false;
  };
}, []);
...

im not 100% sure if this is the VERY best approach, but i have seen similar code in places so i addopted this.

Thanks, I will try this, The problem also occurs also with markers but once user restart the app it works : — Try2prog, Apr 28 '21 at 17:25
it fetch, appears and then dissappear (as I did the asyncFetch() twice?) — Try2prog, Apr 28 '21 at 17:49

score 0 · Answer 3 · answered Apr 29 '21 at 19:27

problem was solved: the setTrails was under scope and it kept refreshing with empty data.

querySnapshot.forEach(async documentSnapshot => {
                trails.push({
                  ...documentSnapshot.data(),
                  key: documentSnapshot.id,

                });
              setTrails(trails);  // <<<~~~~ put the set in this scope.
            });
              setLoading(false);
          });

react native data show on console.log but not on screen

3 Answers3