Question

这是我的带有Firebase的React项目中的代码，我被困在“早上”这个问题中，请帮助我。

constructor (){
        super()
        this.state = {Message : false}
        this.Navigate = this.Navigate.bind(this)


        CompLoad = true

        var i = firebase.auth().currentUser.uid

        firebase.database().ref('users/' + i + '/inbox').limitToLast(1)

         .on('value' , function (x){

            if (CompLoad === false){

            var data = x.val()  

            alert(JSON.stringify(data))

            R = 'Inbox'

            this.Navigate()

            }

            if (CompLoad === true){
                CompLoad = false
            }


            })

            }

它给我错误：-

TypeError: Cannot read property 'Navigate' of null

导航功能

Navigate =  () => {     
        this.context.router.history.push('/' + R)
    }

如果我用setState替换Navigate

this.setState({
                Message : true
            })

反应说：

TypeError: Cannot read property 'setState' of null

Answer 1

这是无法访问的unitl，除非您绑定它或使用箭头功能。

将其更改为箭头功能

    firebase.database().ref('users/' + i + '/inbox').limitToLast(1)

     .on('value' , (x) => {

        if (CompLoad === false){

        var data = x.val()  

        alert(JSON.stringify(data))

        R = 'Inbox'

        this.Navigate()

        }

        if (CompLoad === true){
            CompLoad = false
        }


        })

        }

或将其绑定

  firebase.database().ref('users/' + i + '/inbox').limitToLast(1)

     .on('value' , function (x){

        if (CompLoad === false){

        var data = x.val()  

        alert(JSON.stringify(data))

        R = 'Inbox'

        this.Navigate()

        }

        if (CompLoad === true){
            CompLoad = false
        }


        }.bind(this));

        }

Answer 2

您的回调函数正在更改this的上下文，而不再是class。
使用arrow function来获取词法上下文：

 .on('value' , (x) => {
....

或暂时将this值保留在回调上方并使用它：

// outside the callback in the constructor
const that = this;
// inside the callback
 .on('value' , function (x){
that.Navigate()

Answer 3

您应将此回调更改为使用词法范围

.on('value' , function (x){
...

到

.on('value' , (x) => {
...

有关lexical scoping的更多信息

Answer 4

首先，应在构造函数内部分配属性，而不是变量：

示例：

CompLoad = true // incorrect
this.CompLoad = true // correct

第二，您不应在构造函数中使用setState。

第三，要访问函数内部的父上下文this，可以使用bind或arrow function。

最后，要执行api操作并设置状态，则应该使用componentDidMount lifecycle method并从那里调用api并根据需要更新状态。

如何在Firebase中使用SetState或函数

4 个答案: