调用 Firestore 存储导致应用程序停止

Question

我认为在我的代码中我以某种方式循环遍历图像，但我的 console.log 确实很疯狂。我每个文件夹里只有 3 张图片。一个打来电话back，另一个打来电话front。我怎样才能让它显示所有图像而不导致应用程序缓慢停止。同样，每个文件夹中只有 3 张图像。

为了简洁起见，我只发布其中之一。

   const [frontImage, setFrontImage] = useState();

    const getFrontImage = async () => {

        var user = firebase.auth().currentUser.email;

// like this right here gets put out almost 50 times

        console.log(user + "this is name");

        const imageRefs = await firebase.storage().ref().child(user + '/FrontPic/').listAll();

        const urls = await Promise.all(imageRefs.items.map((ref) => ref.getDownloadURL()));

        setFrontImage(urls);

    }

    useEffect(() => {

        getFrontImage();

    });

稍后在此处调用图像

              <View style={styles.DisplayImageWith}> 

                    {frontImage && frontImage.map(url => (

                    <View style={{ justifyContent: 'center' }} key={url}>

                        <Image source={{ uri: url }} style={{ width: 150, height: 150 }} />

                    </View>

                    ))}

                </View>

Answer 1

每次setFrontImage调用getFrontImage都会导致另一个红色，从而导致无限循环。如果您只想运行getFrontImage 一次，请将空数组传递给 useEffect，如下所示：useEffect(cb, [])

Answer 2

将依赖项数组添加到钩子中useEffect，其中应包含 function&nbsp;getFrontImage，因此将其包装在useCallback钩子中。您还可以使用空的依赖项数组[]