React Hooks:setState在useEffect内部表现奇怪

Question

我有一个组件，每次重新渲染时我都想保持滚动位置。

因此，我为它的位置创建了一个useState。在useEffect中，我创建了一个intervall，它将每隔x秒跟踪当前位置，并使用setState进行设置。

到目前为止，它似乎运行得很好，因为当我在useEffect中控制台记录状态(scrollTop(时，我会得到更新的数字。

我通过使用useRef将元素设置为ref来跟踪它。

const [scrollState, setScrollState] = useState(0);
const element = useRef<HTMLDivElement>(null);
useEffect(() => {
console.log(scrollState);
const captureElementScroll = setInterval(() => {
if (element.current) {
const scrollTop = _.get(element.current, "scrollY");
setScrollState(scrollTop);
}
}, 2000);
if (element.current && element.current) {
element.current.scrollTo({
behavior: "smooth",
top: scrollState
});
}
return () => {
clearInterval(captureElementScroll);
};
}, [scrollState]);

现在的问题是，每次重新渲染该组件时，当前状态都会设置回零。

也许是父组件有问题？我没主意了。我这样做正确吗？

Answer 1

现在回顾这个问题(我已经停止了我正在做的工作(，我很确定我在错误的级别上捕捉到了滚动位置。

正如我已经猜到的，问题是Parent组件被重新渲染，因此状态丢失。

也许我会在某个时候做一些类似的事情。如果是的话，我会写一个更详细的答案。