Question

我正在尝试在react-native上构建我的第一个应用程序。但是我有问题，我想从firebase显示我的数据，并且当我重新加载应用程序时，插入到firebase的数据也不会被删除。这就是我在渲染中所拥有的东西：

 let tags = this.state.tagArray.map((val, key) => {
  return <TagContainer key={key} keyval={key} val={val}
    deleteMethod={() => this.deleteTag(key)} />
});

这是我的firebase配置：

this.itemRef=this.getRef().child('tags');
getRef(){
  return firebaseApp.database().ref();
}

getItems(itemRef){
  itemRef.on('value',(snap)=>{
    let items=[];
    snap.forEach((child) => {
      items.push({
        title:child.val().title,
        _key:child.key
      });   
    });
 Array.prototype.push.apply(this.state.tagArray, items);
  this.setState({ tagArray: this.state.tagArray })
  });

这是我的addtag函数，我在其中设置了tagArray：

addTag() {
  if (this.state.tagText) {
    this.state.tagArray.push({
      'tag': this.state.tagText
    });
    this.setState({ tagArray: this.state.tagArray })
    this.setState({ tagText: '' })
    this.itemRef.push({title:this.state.tagText});
  }
}

Answer 1

您不应该将数据推送到状态对象。如果不使用setState（），则不允许更改状态。

<template>
    <div class="container header header--home">

    <h2 v-for="item in title" :key="item.id" v-html="item"></h2>
    <p v-for="item in content" :key="item.id" v-html="item"></p>

</div>
</template>

<script>

import { mapState, mapActions } from 'vuex'
export default {
  created() {
    this.getPosts()
  },
  computed: mapState({
    content: state => state.posts.pages[0].content,
    title: state => state.posts.pages[0].title,
  }),
  methods: {
    ...mapActions([
      "getPosts",
    ])
  }
}

</script>

在react-native app中显示firebase数据

1 个答案: