javascript - 通过更新ref()逐项增加

应用状态

this.state = {
   text: "",
   loading: false,
   currentNum: 0
};

我最初是从数据库中获取第一项。从currentNum: 0开始，正确渲染了第一项。

componentWillMount() {

   let inititialLoad = true;
   this.setState({ loading: true });

   firebase.database().ref(this.state.currentNum).on("value", snapshot => {
      this.setState({ text: snapshot.val() && snapshot.val().text });
      if (inititialLoad) {
         this.setState({ loading: false });
         inititialLoad = false;
      }
   });

}

然后我添加了一个按钮

  <TouchableOpacity onPress={this.nextData}>
    <View>
      <Text>Next text</Text>
    </View>
  </TouchableOpacity>

使用onPress函数将一个添加到currentNum

nextData() {

   this.setState({
      currentNum: this.state.currentNum + 1
   });

   firebase.database().ref(this.state.currentNum).on("value", snapshot => {
      this.setState({ text: snapshot.val() && snapshot.val().text });
   });

}

我在firbase实时数据库中的数据树是：



我面临的问题是，当我按下按钮时，索引正确增加了，但数据获取似乎发生了变化。

什么时候

currentNum: 0Text: FirstText

currentNum: 1Text: FirstText

currentNum: 2Text: SecondText

因此，我最初必须按两次按钮才能开始逐一浏览各项内容。

我的代码中缺少什么吗？还是我使用错误的方法来使用ref（）递增？

提前致谢！

最佳答案

setState是异步的，您可以将回调传递给setState，该回调将在状态更改后执行

所以你可以做的是

this.setState({
    currentNum: this.state.currentNum + 1
}, () =>
{
    firebase.database().ref(this.state.currentNum).on("value", snapshot =>
    {
        this.setState({text: snapshot.val() && snapshot.val().text});
    });
});