React - プロパティsetState of nullを取得できません

Question

Reactコンポーネント内のFirebaseからスナップショットvalを取得しようとしています。私は、コンポーネントのinitに基づいて値を取得し、変更のリスナーを添付します。

class ChatMessages extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     messages: [], 
    }; 
    this.getMessages = this.getMessages.bind(this); 
} 

getMessages(event) { 
    const messagesRef = firebase.database().ref('messages'); 
    messagesRef.on('value', function(snapshot) { 
    this.setState({ messages: snapshot.val() }); 
    }); 
} 

componentDidMount() { 
    this.getMessages(); 
} 

render() { 
    return (
     <div className="container"> 
      <ul> 
      <li>Default Chat Message</li> 
      { this.state.messages } 
      </ul> 
     </div> 
    ); 
} 

} 

Answer 1

これは 'this'がそのコンテキストを失っているためです。そのため、 'this.setState'は未定義です。 'that'という変数を使って実際の 'this'の参照を持つことができます。

class ChatMessages extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     messages: [], 
    }; 
    this.getMessages = this.getMessages.bind(this); 
} 

getMessages(event) { 
    const messagesRef = firebase.database().ref('messages'); 
    let that = this 
    messagesRef.on('value', function(snapshot) { 
    // here 
    that.setState({ messages: snapshot.val() }); 
    }); 
} 

componentDidMount() { 
    this.getMessages(); 
} 

render() { 
    return (
     <div className="container"> 
      <ul> 
      <li>Default Chat Message</li> 
      { this.state.messages } 
      </ul> 
     </div> 
    ); 
} 

} 

可能であれば、矢印機能を使用してコンテキストを保持できます。

getMessages(event) { 
    const messagesRef = firebase.database().ref('messages'); 
    // here 
    messagesRef.on('value', snapshot => { 
    // here 
    that.setState({ messages: snapshot.val() }); 
    }); 
}