通过更新 ref() 增加项目答案

【问题标题】：Increment through items by updating the ref()通过更新 ref() 增加项目
【发布时间】：2018-01-16 12:16:56
【问题描述】：

应用状态

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: 0 Text: FirstText

currentNum: 1 Text: FirstText

currentNum: 2 Text: SecondText

所以我最初必须按两次按钮才能开始逐项浏览。

我的代码中是否缺少某些内容？还是我使用了错误的方法来使用 ref() 递增？

提前致谢！

【问题讨论】：

标签： javascript firebase react-native firebase-realtime-database

【解决方案1】：

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

【讨论】：