Estoy haciendo un clon de Facebook, en mi feed de inicio, quiero mostrar todas las publicaciones, este código muestra las publicaciones pero no en orden, quiero mostrar primero la última publicación.
pero ahora esto se muestra (publicación anterior (que ya estaba cargada) en orden descendente y después de eso, todas las publicaciones nuevas en el orden correcto)
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> ) }usa subtítulos como datos de publicación y los recibe como accesorios
Esta línea comentada es en realidad cómo se supone que debes hacer esto:
// const [postdatabeforeload, setpostdatabeforeload] = useState([]) Sin useState o setState su código de representación se ejecuta antes de que los datos se carguen desde la base de datos, por lo que representa la matriz vacía que configuró inicialmente: var postdata=[] .
Al usar useState / setState , le dice a ReactJS que los datos han cambiado y eso lo activa para volver a mostrar la interfaz de usuario con el estado actualizado.
Entonces algo como:
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) }); }, []) Hasta useEffect se haya ejecutado, su postdata tendrá su valor predeterminado de [] , ya que eso es lo que especifica aquí [postdata, setpostdata] = useState([]) .
Luego, una vez que los datos se hayan cargado, obtendrá la matriz de subtítulos.
Ver también: