我在 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 。