Question

我正在使用create-react-app。而且，如果您遵循以下功能，则可以从Firebase请求数据：

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

如上所示，我已经用snapshot.val中的值更新了 state 。

现在在同一组件中，我使用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 */);

我希望它能对您有所帮助：）

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

1 个答案: