Хранение Firebase: загружайте изображения и помещайте их в img sr c на карте React

Question

Я пытаюсь отобразить массив, чтобы получить URL-адрес изображения из хранилища Firebase и вывести его на страницу. Код дает мне 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 автоматически выполнит повторную визуализацию интерфейса пользователя. части, которые зависят от измененного состояния. Итак, в вашем методе рендеринга вы будете использовать URL загрузки с state.downloadURLs.