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

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