如何捕获快照（响应）并呈现它？

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

我希望它有帮助:)