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

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。