时间戳

首页 > 解决方案 > 帖子不按顺序排列。想在顶部显示最新的帖子

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

问题描述

我正在制作一个 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

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

标签： javascriptreactjsfirebase-realtime-database

解决方案

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

// 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([])。

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

另见：

推荐阅读