如何捕獲快照（響應）並進行渲染？

Question

我正在使用create-react-app。 如果您觀察到我從firebase請求數據的以下功能：

request = (id) => {        
    firebaseDB.ref(`Majors/${id}`).once('value')
    .then((snapshot)=>{           
        this.setState({
            data: snapshot.val()
        })
    })
 }

如上所示，我已使用snapshot.val中的值更新了狀態 。

現在在同一個組件中，我像這樣使用this.state.data

 showCourses(){        
    this.state.data.Courses.map((item,i)=>(
        <div key={i}>
           asd
        </div>           
    ))        
 }

並拋出一條錯誤消息，提示“ this.state.data.Courses未定義”，因為響應（快照）尚未返回數據 ，並且狀態尚未更新。

我試圖像這樣添加一個條件：

showCourses(){
    if (this.state.data.Courses){
        return(this.state.data.Courses.map((item,i)=>(
        <div key={i}>
           asd
        </div>)))
    }
}

錯誤消失但它不會呈現！

我假設問題是：用於捕獲，更新狀態和重新呈現組件的機制是什么？

Answer 1

該錯誤是因為this在使用request功能， this是不正確地與元件綁定。 嘗試使用function () {}語法，然后在創建函數后立即添加：

request = request.bind(/* your element */);

我希望它有幫助:)