javascript - Firebase 存储 : download images to and put to img src in React map

Question

我正在尝试映射数组以从 Firebase 存储获取图像网址并将其列出到页面。代码给了我一个网址，但问题是代码没有按时将网址设置为 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。 .