如何捕捉快照（响应）并渲染它？

Question

我正在使用 create-react-app。如果您观察到我为从 firebase 请求数据所做的以下功能：

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

如上所示，我已将 state 更新为 snapshot.val.

中的值

现在在同一个组件中，我使用 this.state.data 像这样

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

并返回一个错误 'this.state.data.Courses are not defined' 因为响应（快照）尚未返回数据并且状态尚未更新。

我试着添加这样的条件：

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

希望对您有所帮助:)

如何捕捉快照（响应）并渲染它？

How to catch a snapshot (reponse) and render it?

javascript

snapshot

request

firebase

reactjs