#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().коллекция(«новости»).Заказ(«Дата»,»дата»);