我在 redux 中有一个对象数组,我正在浏览器中显示它们:

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

object-0 
object-1 
object-2 
object-3 
object-4 
object-5 
object-6 
object-7 
object-8 
object-9 
object-10 
object-11 
object-12 
object-13 
object-14 
object-15 
object-16 
object-17 
object-18 
object-19 <------ scroll position 

向下滚动时,我正在访问 api 并将对象附加到数组中。我添加了一项检查,如果数组中的对象数量超过 20,则应删除前 10 个数据。

   case "DELETE_LISTING_TOP_PROFILES": 
 
        let tempListingData = state[action.payload.listingId];           
        let tempListingProfiles = [...state[action.payload.listingId].profiles];             
        tempListingProfiles.splice(0,10); 
            state 
            ={ 
                ...state, 
                [action.payload.listingId]:{ 
                    ...tempListingData, 
                    profiles: tempListingProfiles 
                } 
            } 

在我的 redux 中,前 10 条数据被删除,我的 View 变为:

object-10 
object-11 
object-12 
object-13 
object-14 
object-15 
object-16 
object-17 
object-18 
object-19 
object-20 
object-21 
object-22 
object-23 
object-24 
object-25 
object-26 
object-27 
object-28 
object-29 <------------ scroll position 

您可以观察到滚动位置现在更改为object-29。我希望它保持在位置 19,如下所示:

object-10 
object-11 
object-12 
object-13 
object-14 
object-15 
object-16 
object-17 
object-18 
object-19 <----------- scroll position 
object-20 
object-21 
object-22 
object-23 
object-24 
object-25 
object-26 
object-27 
object-28 
object-29 

那么,从redux中删除数据并添加一些数据后,如何保存滚动位置?

请您参考如下方法:

您可以阅读有关 getSnapshotBeforeUpdate() 生命周期方法 ( official documentation ) 的信息。

refs 功能 ( official documentation ) 配合使用,它将帮助您在更改之后将更改应用于 DOM 之前管理滚动位置例如, Prop 。


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!