Загрузка изображения профиля пользователя

Question

Я использую React, Redux и Firebase для создания веб-сайта. Я использую хранилище firebase для хранения изображения профиля пользователя и хочу, чтобы оно отображалось на веб-сайте после того, как пользователь создал учетную запись. Раньше мой подход заключался в том, чтобы включать следующий элемент изображения в каждый компонент, который должен отображать изображение профиля:

//1st Approach
render(){

        const { auth } = this.props;

        return(
                       .......

                        <img src={firebase.storage().ref(`images/`+auth.uid).getDownloadURL()}></img>

                       ......

Однако при этом отображался только значок изображения по умолчанию (зеленая гора и белое облако с небом. синий фон), а консоль сообщила об ошибке «404» о том, что объект «images / undefined» не существует. Вероятно, ошибка произошла из-за того, что метод getDownloadUrl был вызван до того, как аутентификация была передана из состояния Redux в компонент. Другой подход, который я пробовал, заключался в добавлении поля «profileimage» в состояние компонента и установке значения поля на URL-адрес изображения внутри componentDidMount:

//2nd Approach
        componentDidMount() {

           const { auth } = this.props;
           const id = auth.uid;
           const image = firebase.storage().ref(`images/`+id);
           image.getDownloadURL().then((url) => this.setState({ profileimage: url }));
        }

        ......

         <img src={this.state.profileimage}></img>

Второй подход успешно отображал изображение. Однако, поскольку componentDidMount вызывается только один раз в течение жизненного цикла компонента, если пользователь обновляет страницу, «изображение профиля» будет установлено в пустую строку. Поэтому мне интересно, как я могу реализовать эту функцию наиболее подходящим способом. Спасибо!

Answer 1

auth.uid - это тот, который вы получили из sdk firebase?

Вы можете получить uid с помощью наблюдателя onAuthStateChanged:

componentDidMount() {
  firebase.auth().onAuthStateChanged((user) => {
    const image = firebase.storage().ref(`images/${user.uid}`);
    image.getDownloadURL().then((url) => this.setState({ profileimage: url }));
  });
}

Таким образом, вы гарантируете что пользователь инициализирован.