如何捕获快照（响应）并进行渲染？

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 */);

我希望它有帮助:)