返回到列表中所需的位置

Question

当按钮被单击时，我的列表被替换为一个单项列表。当我点击"返回列表"时按钮时，我想返回到我滚动到的列表中相同的位置。

useEffect(() => {
if (props.specialOfferRestaurant) {
localStorage.setItem('scrollPosition', String(window.scrollY))
localStorage.setItem('restaurants', JSON.stringify(allRestaurants));
window.scrollTo(0, 0)
setAllRestaurants([props.specialOfferRestaurant])
} else if (!props.specialOfferRestaurant && localStorage.length > 0) {
setAllRestaurants(JSON.parse(localStorage.getItem('restaurants')))
window.scrollTo(0, Number(localStorage.getItem('scrollPosition')))
localStorage.clear();
}
}, [props.specialOfferRestaurant])

在这段代码中，除了将滚动条返回到正确位置的那一行之外，其他都可以正常工作。将滚动条返回到0的同一行也可以。

滚动位置存储在localStorage中，没有问题。如果我把这个添加到代码的底部:

console.log(Number(localStorage.getItem('scrollPosition')))

我看到正确的滚动Y值存储在localStorage

我不知道出了什么问题。

Answer 1

要解决这个问题，您可以使用window.pageYOffset属性而不是window.scrollY属性来获取页面的滚动位置。window.pageYOffset属性在页面滚动时更新，无论是手动还是编程。

更新答案为新的描述 要解决这个问题，你可以使用一个单独的useEffect钩子来更新列表，并确保它在滚动位置被设置后执行。这将确保在滚动页面之前更新列表，并且滚动位置是正确的。

useEffect(() => {
if (props.specialOfferRestaurant) {
localStorage.setItem("scrollPosition", String(window.scrollY));
localStorage.setItem("restaurants", 
JSON.stringify(allRestaurants));
window.scrollTo(0, 0);
setAllRestaurants([props.specialOfferRestaurant]);
} else if (!props.specialOfferRestaurant && localStorage.length > 0) {
setAllRestaurants(JSON.parse(localStorage.getItem("restaurants")));
window.scrollTo(0, Number(localStorage.getItem("scrollPosition")));
localStorage.clear();
}
}, [props.specialOfferRestaurant]);
useEffect(() => {
if (props.specialOfferRestaurant && localStorage.length > 0) {
setAllRestaurants(JSON.parse(localStorage.getItem("restaurants")));
}
}, [props.specialOfferRestaurant]);

Answer 2

感谢@Md找到了正确答案。Mohaiminul Hasan，它来自localStorage的列表没有时间呈现的假设，因此滚动不能应用到列表的中间。最终的工作代码如下所示:

useEffect(() => {
if (!props.specialOfferRestaurant && localStorage.length > 0) {
window.scrollTo(0, Number(localStorage.getItem('scrollPosition')))
localStorage.clear();
}
}, [allRestaurants]);
useEffect(() => {
if (props.specialOfferRestaurant) {
localStorage.setItem('scrollPosition', String(window.scrollY))
localStorage.setItem('restaurants', JSON.stringify(allRestaurants));
window.scrollTo(0, 0)
setAllRestaurants([props.specialOfferRestaurant])
} else if (!props.specialOfferRestaurant && localStorage.length > 0) {
setAllRestaurants(JSON.parse(localStorage.getItem('restaurants')))
}
}, [props.specialOfferRestaurant])