在ReactJS中手动刷新Firebase对象

Question

我有一个小的应用程序，用户可以输入一个人的名字，并将他们添加到一个板上，然后用户可以向上或向下投票他们（为梦幻足球）。目前，唯一不需要刷新页面而立即发生的事情是通过文本输入框添加播放器。这为对象做了一点淡入,它就会出现在屏幕上：

addPlayer(player) {

this.state.user ?
  this.database.push().set({ playerContent: player, votes: 0})
  :
  console.log("Not Logged In")
}

这是不是因为是推送才实时完成的？在用户投票后，我如何更新玩家的游戏板？现在，如果说无名氏有两票，无名氏有两票，你投无名氏最多3票，他不会跳到无名氏前面，直到你刷新页面。有没有一种方法可以在你投票的时候刷新每一个单独的对象？这是我的投票代码

upvotePlayer(playerId) {
if(this.state.user) {
  let ref = firebase.database().ref('/players/' + playerId + '/voters');

  ref.once('value', snap => {
    var value = snap.val()
    if (value !== null) {            
        ref.child(this.uid).once('value', snap => {
          if (snap.val() === 0 || snap.val() === -1 || snap.val() == null){
            ref.child(this.uid).set(1);
          } else if (snap.val() === 1) {
          ref.child(this.uid).set(0);
          }
          else {
            console.log("Error in upvoting. snap.val(): " + snap.val())
          }

        })

    } else {
        console.log("Doesn't exist")
        ref.child(this.uid).set(1);
    }
});
}
else {
    console.log("Must be logged in to vote.")
}
}

如果我缺少相关代码，请告诉我，我会提供。我尝试在投票后调用componentdidmount和this.forceupdate()（即使它是不鼓励的），只是想看看它是否是一个解决方案，但它似乎不是。

这是在app.js中呈现的player组件

{
  orderedPlayersUp.map((player) => {
    return (
      <Player
        playerContent={player.playerContent}
        playerId={player.id}
        key={player.id}
        upvotePlayer={this.upvotePlayer}
        downvotePlayer={this.downvotePlayer}
        userLogIn={this.userLogIn}
        userLogOut={this.userLogOut}
        uid={this.uid}
      />
    )
  })
}

当我将upvotePlayer函数的数据库调用更改为.on而不是.on时，一旦并继续向上投票一个玩家，它会向我的控制台喷出无限量的日志。来自此组件的日志将挂载函数：

app.js第51行是下面的console.log。

  this.database.on('child_changed', function (snapshot) {
    var name = snapshot.val();
    console.log("Player: " + name.playerContent + " has  " + name.votes + " votes.")
  })

当我将comondentDidMount（）中的player.jsx文件中的.once从.on更改为.on时，投票立即开始注册到屏幕上，如下所示。澄清一下，这解决了我的问题，即投票图标在我从上投改为下投时没有实时改变。我还没有测试它是否注册一个球员超过另一个更多的票数，正如我最初的要求。只是想为任何可能翻阅这段代码以帮助自己的人澄清一下。

componentDidMount() {
  let ref = firebase.database().ref('/players/' + this.playerId + '/voters');

  ref.on('value', snap => {
    var value = snap.val()

    if (value !== null && this.props.uid !== null) {       
        ref.child(this.props.uid).on('value', snap => {
          if (snap.val() === 1){
            this.setState({ votedUp: true, votedDown: false })
            }
          else if (snap.val() === 0) {
            this.setState({ votedUp: false, votedDown: false })
          }
          else if (snap.val() === -1) {
            this.setState({ votedDown: true, votedUp: false })
          }
          else {
          console.log("Error calculating the vote.")
          }
        })
    } else {
      //Error
    }
});

  }

Answer 1

您的firebase调用目前是一个.once（）调用。只会调用数据库一次。如果希望组件继续监听更改，那么需要切换到.on（）调用。因此，这将是ref.child（this.uid）.on（...）而不是ref.child（this.uid）.once（...）

ref.child(this.uid).on('value', snap => {
          if (snap.val() === 0 || snap.val() === -1 || snap.val() == null){
            ref.child(this.uid).set(1);
          } else if (snap.val() === 1) {
          ref.child(this.uid).set(0);
          }
          else {
            console.log("Error in upvoting. snap.val(): " + snap.val())
          }

        })