从redux中移除数据并保存滚动位置

Question

我在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个数据被删除，我的视图如下：

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中删除数据并向其添加一些数据之后，如何保存滚动位置？

Answer 1

您可以阅读getSnapshotBeforeUpdate()生命周期方法(正式文件)。

例如，在与refs特性(正式文件)一起使用时，它将帮助您在修改道具之后将更改应用到DOM之前管理滚动位置。