Последний пост первый в react

#javascript #html #reactjs

Вопрос:

Есть ли какой-нибудь способ, с помощью которого я могу сначала показать последний пост в react

Я не смог найти никакого способа решить эту проблему

 import React from 'react'
import firebase from '../firebase'
import { useState, useEffect } from 'react';
import News from './News'
import logo from '../logo.svg';
import '../App.css'

export default function NewsProvider() {

    const [news, setNews] = useState([]);
    const [loading, setLoading] = useState(false);

    const ref = firebase.firestore().collection("news");

    function getNews() {
        console.log("Loading news started");
        setLoading(true);
        ref.onSnapshot((querySnapshot) => {
            const items = [];
            querySnapshot.forEach((doc) => {
                items.push(doc.data());
            });
        console.log("stopped");
        setNews(items);
        setLoading(false);
    });
    }
    

    useEffect(() => {
        getNews();
    }, []);

    if (loading) {
        return (
            <div>
                <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
                <h1>Loading</h1>
            </header>
          </div>
            </div>
        )
    }
     

    console.log(news);
    
    return (

        <div>
        <News news = {news} />
        </div>
    )
    




} 

Есть ли какой-нибудь способ, с помощью которого я могу сначала показать последний пост в react

Комментарии:

1. в вашем новостном объекте будет какое-то поле даты, просто отсортируйте его по нему.

2. Попробуйте изменить элементы. нажмите(…) на элементы.снимите флажок(…)

Ответ №1:

В функции getNews добавьте новые элементы в начало массива с помощью unshift

Будьте осторожны, unshift() перезаписывает исходный массив.

Вот пример:

 const querySnapshot =["Banana","Orange","Apple","Mango","Lemon","Pineapple"];
const items = [];
 querySnapshot.forEach((doc) => {
                items.unshift(doc);
            });
console.log(items); 

Ответ №2:

просто используйте .collection(«новости»).OrderBy(«дата»,»дата»)

просто создайте новое поле в своей базе данных даты и времени

Комментарии:

1. const ref = firebase.firestore().коллекция(«новости»).Заказ(«Дата»,»дата»);