Как установитьState в componentDidMount?

Question

Работая над этим проектом и пытаясь вызвать информацию базы данных в реальном времени из firebase, затем установить состояние после вызова, чтобы я мог использовать его при рендеринге. Это мой код в настоящее время, но его высказывание setState неизвестно, я пытался прочитать о других решениях этой проблемы, но не понимаю его, любая помощь будет оценена. Спасибо.

  componentDidMount(){
    this._getLocationAsync();
    firebase.database().ref('pets/').once('value', function (snapshot) {
        this.setState({ testdid: snapshot.val().name })
     });
  }

Answer 1

Короткий ответ: потому что this в вашем обратном вызове firebase относится к самой функции, а не к компоненту. Использование функции стрелки должно правильно связать this с компонентом, который должен исправить вашу ошибку:

firebase.database().ref('pets/').once('value', (snapshot) => {
    this.setState({ testdid: snapshot.val().name })
 });

Читайте о scope в JS, особенно в отношении ключевого слова this. Определенно важно знать, потому что иногда у него странное поведение.

Answer 2

Ваш обратный вызов сделан в другом контексте, вам нужно сделать:

 componentDidMount(){
    this._getLocationAsync();
    firebase.database().ref('pets/').once('value', function (snapshot) {
        this.setState({ testdid: snapshot.val().name })
     }.bind(this));  // bind to current context
  }

или с ES6, который я предпочитаю

componentDidMount(){
    this._getLocationAsync();
    firebase.database().ref('pets/').once('value', snapshot => { // Using Fat Arrow
        this.setState({ testdid: snapshot.val().name })
     }); 
  }