У меня проблемы с добавлением бесконечной прокрутки в свой дом. js для отображения сообщений. Если я отображаю все сообщения напрямую, то при каждом refre sh в мою базу данных (Firebase) не добавляется счетчик чтения. Я хочу ограничить отображение 10-12 сообщений и отображать следующее в соответствии с прокруткой. Как и куда добавить код бесконечной прокрутки и что добавить. Вот мой статус c Home. js. В приведенном ниже коде все сообщения отображаются напрямую:
function Home() {
const classes = useStyles();
const [modalStyle] = useState(getModalStyle);
const [posts, setPosts] = useState([]);
const [open, setOpen] = useState(false);
const [openSignIn, setOpenSignIn] = useState(false);
const [username, setUserName] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');
const [user, setUser] = useState('null');
const [image, setImage] = useState(null);
const [progress, setProgress] = useState(0);
const [url, setUrl] = useState("");
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((authUser) => {
if (authUser){
console.log(authUser);
setUser(authUser);
}
else {
setUser(null)
}
})
return() =>{
unsubscribe();
}
}, [user, username]);
useEffect(() => {
db.collection('posts').orderBy('timestamp','desc').onSnapshot(snapshot => {
setPosts(snapshot.docs.map(doc =>({
id: doc.id,
post: doc.data()
})));
})
}, [])
return (
<div className="app">
<div className="app_header">
<img className="app_headerImage"
src="https://firebasestorage.googleapis.com/v0/b/inconnect-b0ef1.appspot.com/o/dp%2FLOGO786.png?alt=media&token=adeb1a58-5085-4a3f-b33a-9b6d8078624c"
/>
<div className="app_loginContainer">
<Button onClick={() => auth.signOut()}><Link to='/' >Logout </Link><BsHouseDoorFill/> </Button>
<a>
<Button > <Link to='/Feed' > Feed</Link> <BsHouseDoorFill/> </Button>
<Button ><Link to='/Profile' > Profile</Link> <BsHouseDoorFill/> </Button>
<br>
</br>
<br>
</br>
<Avatar
className="post_avatar"
alt='inconnect'
src="https://i2-prod.mirror.co.uk/incoming/article6393590.ece/ALTERNATES/s615/Daniel-Craig-in-a-new-photoshoot-to-announce-the-release-of-tickets-Bond-film-Spectre.jpg"
/><h3>Hi {user.displayName}! </h3>
</a>
</div>
</div>
{user?.displayName ? (
<Modal className="photodiv"
open={open}
onClose={() => setOpen(false)}>
<div style={modalStyle} className={classes.paper}>
<ImageUpload username={user.displayName} />
</div>
</Modal>
):
( <h3>Sorry you need to login to upload and comment</h3>
)}
<div className="topload">
<h1 onClick={() => setOpen(true)}> Wanna post {user.displayName}?</h1>
</div>
<Search />
<div className="app_posts">
<div className="app_postsLeft">
{
posts.map(({id, post}) =>(
<Post key={id} postId={id} user= {user} username={post.username} caption={post.caption} imageUrl={post.imageUrl}/>
))
}
</div>
</div>
</div>
);
}
export default Home;