显示更多分页按钮React Firebase

时间:2020-05-19 13:48:28

标签: reactjs firebase pagination

我使用React.js和Firebase编写了函数,单击“显示更多按钮”后显示了更多元素。但是我不喜欢我怎么做。我认为可以做得更好,所以我想问的是如何改进此组件?

    const [myEvents, setMyEvents] = useState([]);
    const [limit, setLimit] = useState(3)


    const getMyEvents = async (start) => {
        let myEventsArray = [];
        await firebase.firestore().collection('wydarzenie')
        .where('master', '==', firebase.firestore().collection('uzytkownik').doc(currentUser))
        .where('miasto', '==', currentCity)
        .orderBy("data_rozpoczecia")
        .startAfter(start)
        .limit(limit)
        .get().then(snapshot => {
            snapshot.forEach(doc => {
                let info = doc.data()
                let el = {
                    id: doc.id,
                    ...info
                }
                myEventsArray.push(el)
              });        
            })
        let new_array = myEvents.concat(myEventsArray)
        setMyEvents(new_array);
    }

    useEffect (() => {
        getMyEvents(new Date());
    }, [])
    return (
        <div className={styles.YourEvents}>
            <p>Twoje Wydarzenia </p>
            {true &&
                <div className={styles.EventsList}>
                    {myEvents && myEvents.map(el => {
                        return (
                            <EventListElement
                                key={el.id}
                                event={el} />
                        )
                    })}
                </div>
            }
            <div onClick={()=>getMyEvents(myEvents[myEvents.length-1].data_rozpoczecia)}>Show more button</div>
        </div>
    )
}

0 个答案:

没有答案