Как остановить прокрутку страницы при загрузке новых данных - PullRequest
Новая
       158

Как остановить прокрутку страницы при загрузке новых данных

0 голосов
/ 07 августа 2020

У меня есть компонент класса в React, который отображает компоненты Post. Внизу у меня есть кнопка, которая загружает больше данных из базы данных. Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке новых данных страница прокручивается вниз. Я хочу, чтобы он прикреплялся к сообщению, где раньше был пользователь.

Мой компонент: 

import React,{Component} from 'react';
import Ride from '../Components/Ride';
import firebase from 'firebase'

class RideList extends Component{

    state={
        rides: [{
            user:{
                photo: '',
                name: '',
                uid: ''
            },
            likes: 0,
            likers: [],
            time: '',
            line: [{lng:22.01,lat:41.01}],
            when: 0
        }],
        lastDoc: {}
    }

    componentDidMount(){
            const db = firebase.firestore();
            db.collection('posts').orderBy('when','desc').limit(5).get().then(res=>{
                const data = []
                res.docs.map(doc=>{
                    data.push({...doc.data(),id: doc.id})
                })
                this.setState({rides: data, lastDoc: res.docs[res.docs.length-1]})
            }).catch(er=>{
                console.log(er)
            })
    }

    loadMore = ()=>{
        const rides = [...this.state.rides];
        const db = firebase.firestore();
        db.collection('posts').orderBy('when','desc').startAfter(this.state.lastDoc).limit(5).get().then(res=>{
                res.docs.map(doc=>{
                    rides.push({...doc.data(),id: doc.id})
                })
                this.setState({rides: rides, lastDoc: res.docs[res.docs.length-1]})
        })
    }

    render(){
        return(
            <div style={{textAlign:'start'}}>
                {this.state.rides.map((el,index)=>{
                        return(
                            <div>
                                <Ride key={el.when} {...el} user={this.props.user}/>
                            </div>
                        )
                })}
                {this.props.uid ? '':<button onClick={()=>this.loadMore()}>Load more</button>}
            </div>
        )
    }
}

export default RideList;

1 Ответ

0 голосов
/ 07 августа 2020

Вы должны проверить документацию "React LifeCycle". И я думаю, эта статья вам поможет.

https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

...