无法读取“offsetTop”答案

【问题标题】：cannot read 'offsetTop'无法读取“offsetTop”
【发布时间】：2022-01-25 04:17:56
【问题描述】：

朋友们好，我在这个项目中使用 ReactJs，我在控制台中收到了这条消息

Uncaught TypeError: Cannot read properties of undefined (reading 'offsetTop') at (About.js)

顺便说一句，鳕鱼正在工作，但我想知道如何删除/修复此消息。鳕鱼：-

  const [start, setStart] = useState(false);
  const secRef = useRef();

  window.addEventListener("scroll", function () {
    const secTop = secRef.current.offsetTop;
    if (window.scrollY >= secTop - 300) {
      setStart(true);
    }
  });

然后我说如果 start 是真的添加一些类，它工作正常但控制台消息有什么问题？

【问题讨论】：

标签： reactjs scroll

【解决方案1】：

这是您在安装组件后需要执行的操作。

你可以使用 React 的 useEffect 钩子来实现这样的“副作用”：

useEffect(() => {
    window.addEventListener("scroll", function () {
        const secTop = secRef.current.offsetTop;
        if (window.scrollY >= secTop - 300) {
            setStart(true);
        }
    });
}, []);

我应该注意；卸载组件后，您将希望删除此事件侦听器。您可以在 useEffect 函数返回的回调中执行此操作。以下是相当常见的模式：

useEffect(() => {
    // Define the on-scroll callback
    const callback = function () {
        const secTop = secRef.current.offsetTop;
        if (window.scrollY >= secTop - 300) {
            setStart(true);
        }
    };

    // Attach the callback after the component mounts
    window.addEventListener("scroll", callback);

    // Detach the callback before the component unmounts
    return () => window.removeEventListener("scroll", callback);
}, []);

另外，根据您的情况，关注Amila's advice 并检查您的引用是否存在（已呈现）可能仍然是明智之举。

【讨论】：

【解决方案2】：

当时您的ref 可能尚未初始化。您可以避免如下运行时错误。

  window.addEventListener("scroll", function () {
    if(secRef.current) {
        const secTop = secRef.current.offsetTop;
        if (window.scrollY >= secTop - 300) {
          setStart(true);
        }
    }
  });

【讨论】：

是的，它修复了这么多
@Adel，请检查 George 的回答。它将避免可能的内存泄漏。