通过更新ref（）来增加项目

Question

应用状态

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函数将{1}添加到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（）？

提前致谢！

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