加载新数据时如何停止页面滚动

Question

I have a class component in react that maps Post components. At the bottom, I have a button that loads more data from the database. The problem I am having is that when the new data is loaded the page is scrolled to the bottom. I want to have it stick to the post where the user was previously

My component:

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;

Answer 1

You should check to "React LifeCycle" documentation. And I think this article helps you.

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