Question

无法读取“offsetTop”

2021-12-24

1680

reactjs scroll

大家好，我在这个项目中使用 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 为真，则添加一些类，它工作正常，但控制台消息有什么问题？

Answer 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 的建议并检查您的引用是否存在（已呈现）可能仍然是明智之举。

Answer 2

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

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