Изображение получено из хранилища firebase, но значение sr c не может быть установлено в компоненте React ANTD Avatar

Question

Я использую компонент Avatar antd. Мое изображение получено из хранилища Firebase.

Вот код, который я уже реализовал.

  test = (imageName) => {
    if (imageName)
    {
        firebaseConfig.storage().ref().child(`users/${imageName}`).getDownloadURL().then(url => {
            return url;
        })
    }
    else{
        return "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png";
    }
}

Здесь имя imagename будет считаться дочерним именем, как вы можете видеть в коде.

Теперь я покажу вам, как я вызываю эту функцию из компонента класса.

 <Avatar src={this.test(imagename)} />

Он отлично работает, если имя imagename равно null.

Не могли бы вы мне помочь для этого, поскольку я новичок в React и Firebase.

Answer 1

Проблема в том, что, когда imageName не равно нулю, вы используете обещание для получения URL-адреса из firebase. Это означает, что начнется асинхронная операция (вызов firebase для URL-адреса), и когда она завершится, функция, которую вы передали в then, будет вызываться с найденным URL-адресом.

Проблема в том, что возврат изнутри обещание не возвращает его из функции (поскольку функция уже возвращается, пока асинхронная операция выполняется в фоновом режиме.

Решение этой проблемы будет заключаться в использовании состояния для хранения URL-адреса , и обновите его из then, когда обещание разрешится.

В этом случае вы вызовете функцию test при монтировании компонента, и вместо того, чтобы возвращать URL-адрес, он установит его в state.

test = (imageName) => {
    if (imageName)
    {
        firebaseConfig.storage().ref().child(`users/${imageName}`).getDownloadURL().then(url => {
            this.setState({imageUrl: url});
        })
    }
    else{
       this.setState({imageUrl: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"});
    }
}

Тогда вы можете использовать его из state вот так:

 <Avatar src={this.state.imageUrl} />