React - 无法获得 属性 setState of null

Question

我打算在我的 React 组件中从 Firebase 获取快照 val。我想根据组件的初始化获取值并附加一个侦听器以进行更改。

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() });
  });
}