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