React - 无法获取属性setState 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.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() }); 
    }); 
}