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

现在回头看这个问题（我已经停止工作了），我很确定我捕获了错误位置的滚动位置。

就像我已经猜到的那样，问题在于父组件被重新渲染，因此状态丢失了。

也许我会在某个时候进行类似的工作。如果是这样，我会写一个更详细的答案。

React Hooks：setState在useEffect内部表现为奇怪

1 个答案: