Визуализировать массив как компонент

Question

как я могу отобразить данные, поступающие из моей базы данных firestore в реагировать на родную систему?

ниже мой код, который только выталкивает данные в массив, но я не знаю, как использовать его на карте. Я попытался использовать Flatlist, но не смог.

На данный момент, когда я пытался напечатать данные в консоли, это выглядит так:

Array ["VD GOT ​​JEALOUS", " Пример содержимого ",]

Я хочу, чтобы этот массив отображался в компоненте 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 (){
      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>
  )
}

Убедитесь, что вы добавляете возврат в каждое условие. Надеюсь, это сработает

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