调用 Firestore 存储导致应用停止答案

【问题标题】：calling Firestore storage causing app to halt调用 Firestore 存储导致应用停止
【发布时间】：2021-03-27 08:50:05
【问题描述】：

我认为在我的代码中我以某种方式循环浏览图像，但我的 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>

【问题讨论】：

在此处发布之前尝试创建最小的可重现示例。我认为这与firestore完全无关

标签： javascript reactjs firebase react-native firebase-storage

【解决方案1】：

getFrontImage 中的每个 setFrontImage 调用都会导致另一个 redner，从而导致无限循环。

如果您只想运行一次getFrontImage ，请将一个空数组传递给 useEffect，如下所示：useEffect(cb, [])

【讨论】：

谢谢！为了将来的知识，如果您想每隔一段时间运行 getFrontImage，我必须创建一个执行此操作的函数并将其传递给 useEffect？

【解决方案2】：

向useEffect钩子添加一个依赖数组，它应该包含函数getFrontImage，因此将它包装在useCallback钩子中。你也可以使用一个空的依赖数组[]

【讨论】：