Изменение переменной в реакции

Question

Итак, у меня есть проблема новичка в React с изменением переменных в React. Как передать этот URL в конец компонента?

const logo = () => {
var logoUrl;
var userId = fire.auth().currentUser.uid;

fire.database().ref('/clients/' + userId).once('value')
.then(function(snapshot) {

var companyID = (snapshot.val().companyID) || 'Anonymous';

fire.database().ref('/company/' + companyID).once('value').then(function(snapshot) {
  logoUrl = (snapshot.val().logo) || 'No Logo';
});

});

console.log(logoUrl);
return <img src={logoUrl} />
}

Answer 1

Итак, вы делаете асинхронный API-запрос к Firebase.

Чтобы использовать logoUrl в ваших компонентных методах, сначала вы должны сохранить его в состоянии, как только его значение будет возвращено Firabase.

Ваш поток должен быть:

1. Запустить запрос API для получения логотипа.
2. Когда ответ будет возвращен, вы должны сохранить его в состоянии компонента.
3. Когда он находится в состоянии, вы можете получить к нему доступ в своем компоненте.

Имейте в виду, что начальное значение logoUrl равно null (или любому другому значению, которое вы задали в конструкторе), пока логотип выбирается из API. Когда это null, вы можете показать загрузочное сообщение.

Примерно так:

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      logoUrl: null
    }
  }

  getLogo() {
    const userId = fire.auth().currentUser.uid

    fire.database().ref('/clients/' + userId).once('value')
      .then(function(snapshot) {

        let companyID = (snapshot.val().companyID) || 'Anonymous'

        fire.database().ref('/company/' + companyID)
          .once('value')
          .then(function(snapshot) {
            const logoUrl = snapshot.val().logo
            this.setState({
              logoUrl
            })
          })

      })
  }

  componentDidMount() {
    this.getLogo()
  }

  render() {
    return this.state.logoUrl ? <img src={this.state.logoUrl} /> : <div>Loading ...</div>
  }

}