Question

我正在尝试在React中制作一个相册组件，该组件从Firebase Storage检索照片网址，并将它们添加到带有React Hooks的状态中。问题是，即使我可以看到图像URL都已通过React Chrome扩展程序正确设置为状态，所以从未创建<script src="https://threejs.org/build/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>标签。

该组件的完整代码：

<img/>

我对React不太熟悉，我确信我只是误解了一些东西。我非常感谢您的提示和帮助！

Answer 1

我实际上解决了这个问题，问题是我没有在加载图像时更新状态，我只是将它们推到数组中，所以视图从未重新渲染。我将其更改为：

    function loadImages() {
            const imagesRef = storageRef.child('/images');
            imagesRef.listAll().then(res => {
                res.items.forEach(resItem => {
                    resItem.getDownloadURL().then(url => {
                        setImages(oldArray => [...oldArray, url]) // This line has changed!
                    })
                })
            });
        }

现在可以了！

使用钩子在状态变化上反应更新列表

1 个答案: