如何在 Firebase 中使用 SetState 或函数答案

【问题标题】：How to use SetState or function with firebase如何在 Firebase 中使用 SetState 或函数
【发布时间】：2018-10-01 10:17:33
【问题描述】：

这是我在一个带有 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

【问题讨论】：

标签： reactjs firebase-realtime-database react-state-management

【解决方案1】：

您的回调函数正在更改 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()

【讨论】：

@PrinceHamza 很高兴它有帮助

【解决方案2】：

这是不可访问的，除非你绑定它或使用箭头函数。

改成箭头函数

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

        }

【讨论】：

【解决方案3】：

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

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

到

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

在lexical scoping上查看更多信息

【讨论】：

【解决方案4】：

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

例子：

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

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

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

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

【讨论】：