加載新數據時如何停止頁面滾動

Question

我有一個 class 組件用於映射 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;

Answer 1

您應該查看“React LifeCycle”文檔。 我認為這篇文章對你有幫助。

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