Question

我正在尝试映射数组以从Firebase存储中获取图像URL，并将它们列出到页面中。该代码为我提供了一个url，但是问题是代码没有按时将url设置为img变量，并没有返回空的img变量。

return(
    <div>
        <Header />
        {this.state.loaded ? <Loading /> : null}
        <div>
            {this.state.productsArr.map((product, i) => {
                let img = '';
                storageRef.child(`images/${product.images[0]}`)
                                        .getDownloadURL()
                                        .then((url) => {
                                            img = url
                                            console.log('then img', img)
                                        })
                                        .catch((err) => console.log(err))
                console.log('result',img)

                return(
                    <div key={i}>
                        <div>
                            <div>
                                <img src={img}
                                    alt={product.category} 
                                />
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
        <Footer />
    </div>
)

我在哪里弄错了？还要获得两次结果。

Answer 1

调用getDownloadURL()意味着SDK必须调用服务器才能获取该URL。到呼叫从服务器返回下载URL时，<img src={img}已运行很长时间了。

因此，您将要在状态中存储下载URL，然后在渲染方法中使用状态中的URL。

通常，您将开始以componentWillMount方法加载数据：

componentWillMount() {
    let promises = this.state.productsArr.map((product, i) => {
        return storageRef.child(`images/${product.images[0]}`).getDownloadURL();
    });
    Promise.all(promises).then((downloadURLs) => {
        setState({ downloadURLs });
    });
}

调用setState()时，React将自动重新呈现依赖于已修改状态的UI部件。因此，在您的呈现方法中，您将使用来自state.downloadURLs的下载URL。

Firebase存储：将图像下载到React Map中并放入img src

1 个答案: