IT技术 - 如何从 Firebase React 获取和显示所有子列表 - 吾爱随笔录

我正在尝试通过获取用户帖子，将其推送到 firebase，然后将其重新显示在元素上来执行类似“博客帖子”的操作。这是我的代码的一部分

constructor(props){
    super(props);
    this.state = {
        title: '',
        story: '',
        date: ''
    };
}

componentDidMount(){
    const rootRef = firebase.database().ref();
    const post = rootRef.child('post').orderByKey();


   post.once('value', snap => {
       snap.forEach(child => {
           this.setState({
               date: child.key,
               title: child.val().title,
               story: child.val().story
           })
       });
   });

}

在渲染（）

<div className="post">
      <h3>{this.state.date}</h3>
      <h2>{this.state.title}</h2>
      <p>{this.state.story}</p>
</div>

在 Firebase 数据库上

得到这个结果

那么我该怎么做才能像结果模式一样显示元素并可以显示所有数据列表。

constructor(props){ super(props); this.state = { title: [], story: [], date: [], post: '', }; };} componentDidMount(){ const rootRef = firebase.database().ref(); const post = rootRef.child('post').orderByKey(); post.once('value', snap => { snap.forEach(child => { this.setState({ date: this.state.date.concat([child.key]), title: this.state.title.concat([child.val().title]), story: this.state.story.concat([child.val().story]) }); const postList = this.state.date.map((dataList, index) => <p> {dataList} <br /> {this.state.title[index]} <br /> {this.state.story[index]} <hr /> </p> ); this.setState({ post: postList }); }); }); }