将数组渲染为组件

Question

如何在 react native 中渲染来自我的 firestore 数据库的数据？

下面是我的代码，它只将数据推送到数组中，但我不知道如何在卡片中使用它。我尝试使用 Flatlist 但失败了。

到目前为止，当我尝试在控制台中打印数据时，它看起来像这样：

数组 [ “VD 嫉妒了”， “示例内容”， ]

我希望在 Card 或 Text 组件中呈现该数组

state = {
    content: []
}
componentWillMount(){
    /* similar to mounted in vue */
    this.retrieveAnnouncement()
}
retrieveAnnouncement = () => {
    /* retrieve announcements */
    firebase.firestore().collection("announcement").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            this.state.content.push(doc.data().CONTENT);
        }).catch(err => console.log(err));
    });

};

render() {
    return (
        <View>
            <Button onPress={this.samplePrint} title="Print"></Button>
        </View>
    )
}

Answer 1

您可以更改您的 Firebase 代码：

retrieveAnnouncement = () => {
const announcements = [];
/* retrieve announcements */
firebase
  .firestore()
  .collection('announcement')
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      announcements.push(doc.data().CONTENT);
    });
    this.setState({ content: announcements });// this will set announcements and triger render.
  })
  .catch(err => console.log(err));
}

在 render 方法之后，您可以使用内容数组。

render (){
      console.log (this.state.content);
      const listItems = this.state.content.map((data) => {
        return (
          <View><Text>{data}</Text></View>
        )
      })
      return (
        <View>
            <Button onPress={this.samplePrint} title="Print"></Button>
            {listItems}
        </View>
    )
  }

希望这将有助于解决您的问题。

Answer 2

state = {
    content: []
}
componentWillMount(){
    /* similar to mounted in vue */
    this.retrieveAnnouncement()
}
retrieveAnnouncement = () => {
  /* retrieve announcements */
  let sampleData = firebase.firestore().collection("announcement").get()
  .then((querySnapshot) => {
    if (querySnapshot.exists) {
      return { success: true, data: doc.data() }
    } else {
      return { success: false, message: "Not Found" }
    }
  }).catch(error => {
    return { success: false, message: error}
  });
  return sampleData
};

render() {
  return (
    <View>
      <Button onPress={this.samplePrint} title="Print"></Button>
    </View>
  )
}

确保在每个条件中添加 return 希望这有效

Answer 3

 componentWillMount(){
        /* similar to mounted in vue */
        this.retrieveAnnouncement();
    }
    retrieveAnnouncement = () => {
    const announcements = [];
        /* retrieve announcements */
        firebase.firestore().collection("announcement").get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
               announcements.push(doc.data().CONTENT);
            }).catch(err => console.log(err));
        });
    this.setState({content: announcements});
    };
render() {
    return (
        <View>
            <Button onPress={this.samplePrint} title="Print"></Button>
            <Text>{this.state.content}</Text>
        </View>
    )
}