0

这是我来自带有 firebase 的 React 项目的代码，我从早上就陷入了这个问题，请帮助我 plzzz

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
4

4 回答 4

2

您的回调函数正在更改的上下文，this它不再是class.
要么使用箭头函数来获取词汇上下文： 

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

或者暂时保持this回调上方的值并使用它： 

// outside the callback in the constructor
const that = this;
// inside the callback
 .on('value' , function (x){
that.Navigate()
于 2018-10-01T10:22:25.207 回答
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));

        }
于 2018-10-01T10:21:49.340 回答
1

您应该更改此回调以使用词法范围

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

到

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

查看更多关于词法作用域的信息

于 2018-10-01T10:22:25.323 回答
0

首先，您应该在构造函数中分配属性而不是变量：

例子：

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

其次，你不应该setState在构造函数内部使用。

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

最后，您要执行 api 操作并设置状态，然后，您应该使用componentDidMount 生命周期方法并从那里调用 api 并根据需要更新状态。

于 2018-10-01T10:33:11.577 回答