帖子不按顺序排列。想在顶部显示最新的帖子

Question

我正在制作一个 facebook 克隆，在我的主页 Feed 上，我想显示所有帖子，此代码显示帖子但不按顺序显示，想首先显示最新帖子。
但现在这显示（旧帖子（已加载）按降序显示，然后所有新帖子按正确顺序显示）

homeFeed.js

import React ,{useState,useEffect} from 'react'
import './stylesheets/HomeFeed.css';
import HomeReels from './HomeReels'
import CreatePost from './CreatePost';
import Post from './Post';
import { ref, onValue} from "firebase/database";
import { realtimedb } from '../firebaseConfiguration';

export default function HomeFeed() {
    const [postdata, setpostdata] = useState([])
 
       
        const starCountRef =  ref(realtimedb, 'Posts/');
        // get post from realtime database
          
        useEffect(()=>{
            onValue(starCountRef, async (snapshot) => {
                const data = snapshot.val();
                          var captions=[];

//data is stored in raltime db firebase as ----> Post > uid > timestamp >{caption:"captions"}    
                        //  conver objects to  array , to store strings in final array data structure is in realtimedb > post > {uid:{time:{caption:"caption}}}
                        (Object.values(data)).forEach((e)=>{
                                (Object.values(e)).forEach((p)=>{
                                    captions.unshift(p.caption)
                                })
                        });
                       
                                setpostdata(captions)
                });
     
        },[])
        // make  Post components
            const postRender = postdata.map((e)=>{
                return<>
                <Post caption={e}/>
                </>
            })


   
    return (
        <div className='HomeFeed'>
                <HomeReels  />
                <CreatePost />
               {postRender}
        </div>
    )
}

post.js

使用标题作为发布数据并将其作为道具接收

Answer 1

这条注释掉的行实际上是你应该这样做的：

// const [postdatabeforeload, setpostdatabeforeload] = useState([])

如果没有useState 或setState，您的渲染代码会在从数据库加载数据之前运行，因此它会渲染您最初设置的空数组：var postdata=[]。

通过使用useState/setState，您告诉 ReactJS 数据已更改，这会触发它以更新的状态重新呈现 UI。

比如：

const [postdata, setpostdata] = useState([])

const starCountRef = ref(realtimedb, 'Posts/');
useEffect(() => {
  onValue(starCountRef, async (snapshot) => {
    const captions = [];
    snapshot.forEach((child) => { 
        captions.push(child.val().caption);
    });
    setpostdata(data)
  });
}, [])

在useEffect 执行之前，您的postdata 将具有其默认值[]，因为这是您在此处指定的[postdata, setpostdata] = useState([])。

然后，一旦数据加载完毕，您将获得字幕数组。

另见：

• Initiate React components with data from Firebase database?
• Retrieving items from firebase and dynamiccaly populating it in react native