Reactjs React-无法获取null的属性setState

我打算在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>
    );
}

}

---

这是因为“这”正在失去它的上下文。因此，'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() });
  });
}