在反应中使用异步等待从火力存储中检索图像

Question

我有一个 useEffect 挂钩，里面有两个函数，第一个 (fetchImages) 获取存储在 firebase 存储中的所有用户图像。

第二个 (loadImages) 等待 fetchImages 并将图像设置为状态数组。问题是图像数组返回空，除非您转到不同的页面并返回……然后该数组将充满图像 url。

我不确定我的 useEffect 挂钩或我的 async await 放置是否有问题，或者其他问题。 if 检查 currentUser 是因为 currentUser returns 在第一次加载时为空。

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)

当前用户userContext文件

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)))
    }

Answer 1

将 currentUser 添加到 useEffect 挂钩的依赖项数组。当 currentUser 状态更新时，您希望副作用是获取相关图像或清除它们。

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]);

在反应中使用异步等待从火力存储中检索图像

Using async await to retrieve images from firebase storage in react

javascript

reactjs

firebase-storage

react-hooks

use-effect