在 React 组件中滚动时状态不更新？

Question

我有一个 React 组件，HomeScreen.js:

import React, { useEffect,useState } from "react";

const HomeScreen = () => {
  const [scrolledY, setScrolledY] = useState(0);
  const handleScroll = () => {
    const scrollY = window.scrollY;
    setScrolledY(scrollY);
    console.log(scrolledY);
  };
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
  }, []);
  return (
    <div
      className="homeScreenContainer"
    >
    </div>
    </div>
  );
};

为什么滚动时 scrolledY 没有更新？

Answer 1

知道了。我只需要添加 scrolledY 状态作为 useEffect 的依赖项；

useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
    window.removeEventListener("scroll", handleScroll);
    };
  }, [scrolledY]);

在 React 组件中滚动时状态不更新？

state not updating on scrolling in React component?

scroll

reactjs

use-state