如何在 firebase 中使用 SetState 或函数

Question

这是我使用 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

Answer 1

这是不可访问的单元，除非你绑定它或使用箭头功能。

改成箭头函数

    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

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

示例：

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

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

第三，要在您的函数中访问父上下文 this，您可以使用 bind or use arrow function.

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

如何在 firebase 中使用 SetState 或函数

How to use SetState or function with firebase

reactjs

firebase-realtime-database

react-state-management