javascript - 如何从 Firebase React 获取和显示所有子列表

Question

我正在尝试通过获取用户帖子来做“博客帖子”之类的事情，将其推送到 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>

在火力数据库上

得到这个结果

那么如何才能显示结果模式这样的元素，并能显示所有的数据列表。

Answer 1

我这样做得到了正确的结果

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

渲染()

<div className="diary">

  <ul>{this.state.post}</ul>

</div>

结果。