我使用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>
)
}