I have a useEffect hook with two functions inside of it, the first (fetchImages) gets all of the user images stored in firebase storage.

The second (loadImages) awaits for the fetchImages and sets the image into a state array. The problem is that the images array is returning empty unless you go to a different page and come back...then the array is filled with image urls.

Im not sure if something is wrong with my useEffect hook or my placement of async await, or something else. The if check for currentUser is because currentUser returns as null on first load.

const [images, setImages] = useState([]); // All user images from storage
useEffect(() => {
    if (currentUser) {
        const fetchImages = async () => {
            setLoading(true)
            const result = await storage.ref(`images/${currentUser.id}`).listAll();
            console.log(result)
            const urlPromises = result.items.map((imageRef) =>
                imageRef.getDownloadURL()
            );
            console.log(urlPromises)
            return Promise.all(urlPromises);
        };

        const loadImages = async () => {
            const images = await fetchImages();
            setImages(images);
            setLoading(false);
        };
        loadImages();
    }
    console.log(loading)
}, []);
console.log(images, image)

The currentUser userContext file

export const UserContextProvider = ({ children }) => {
    const [currentUser, setUser] = useState(null);
    // const [currentUser, setUser] = useState('');
    
    useEffect(() => {
        let unsubscribeFromAuth = null;
        unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
            if (userAuth) {
                const userRef = await createUserProfileDocument(userAuth);

                userRef.onSnapshot(snapShot => {
                    setUser({
                        id: snapShot.id,
                        ...snapShot.data()
                    });
                });
            } else {
                setUser(null)
            }
        });

        return () => {
            unsubscribeFromAuth();
        };
    }, [])
    // console.log(unsubscribeFromAuth)

    const toggleUser = () => {
        auth.signOut()
            .then(() => {
                window.localStorage.clear();
            })
            .then(() => {
                setUser(null)
            })
            .catch(e => console.log('There was a error:'(e)))
    }

CodePudding user response：

Add currentUser to the useEffect hook's dependency array. When the currentUser state updates you want the side-effect to be fetching the related images, or clearing them out.

const [images, setImages] = useState([]); // All user images from storage

useEffect(() => {
  if (currentUser) {
    const fetchImages = async () => {
      const result = await storage.ref(`images/${currentUser.id}`).listAll();
      const urlPromises = result.items.map((imageRef) =>
        imageRef.getDownloadURL()
      );
      return Promise.all(urlPromises);
    };

    const loadImages = async () => {
      setLoading(true);
      try {
        const images = await fetchImages();
        setImages(images);
      } catch(error) {
        // handle error, log it, show message, etc...
      }
      setLoading(false);
    };
    loadImages();
  } else {
    setImages([]);
  }
}, [currentUser]);