React自定义钩子报错：元素数组不可迭代，如何解决？

我尝试封装一个自定义Hook，用来给ref中的所有li元素添加IntersectionObserver监听。直接在组件内实现时功能正常，但抽离成自定义Hook后出现“元素数组不可迭代”的错误，想知道能不能仅通过传入元素数组的方式实现功能。

正常工作的组件内实现代码 #

const App = () => {

  const array = [...Array(50).keys()];
  const ref = React.useRef(null);
  
  
  React.useEffect(() => {

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((element: any) => {
                if (element.isIntersecting) {
                         element.target.style.color = 'green';
                }
            })

        })

        ref.current.querySelectorAll(`li`).forEach(element => {
            observer.observe(element);

        });
}, [ ]);
  
  return (
    <ul ref={ref}>
        {array.map((_, i) => <li key={i}>{i}</li>)}
    </ul>
  )
}

ReactDOM.createRoot(document.getElementById(`root`))
  .render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

抽离自定义Hook后报错的代码 #

const App = () => {

  const array = [...Array(50).keys()];
  const ref = React.useRef(null);
  
  const useCostumeHook = (elements) => {
  
    React.useEffect(() => {

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((element: any) => {
                if (element.isIntersecting) {
                         element.target.style.color = 'green';
                }
            })

        })

        elements.forEach(element => {
            observer.observe(element);

        });
}, [ ]);
  
  }
  
useCostumeHook(ref?.current.querySelectorAll(`li`))
  
  return (
    <ul ref={ref}>
        {array.map((_, i) => <li key={i}>{i}</li>)}
    </ul>
  )
}

ReactDOM.createRoot(document.getElementById(`root`))
  .render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

解决方案 #

报错原因 #

1. 组件首次渲染时，ref.current还未挂载到DOM，此时ref?.current.querySelectorAll('li')返回undefined，传给自定义Hook后调用elements.forEach会直接报错。
2. 自定义Hook定义在组件内部，违反了React Hook的使用规则（Hook必须在组件顶层或其他Hook内部定义，不能嵌套在组件的函数体中）。

正确实现方式 #

通过以下调整可以实现仅传入元素数组的需求：

// 自定义Hook必须放在组件外部，符合React Hook规则
const useIntersectionObserver = (elements) => {
  React.useEffect(() => {
    // 先判断元素数组是否存在，避免undefined调用forEach
    if (!elements?.length) return;

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.style.color = 'green';
        }
      });
    });

    // 遍历元素添加监听
    elements.forEach(element => {
      observer.observe(element);
    });

    // 清理函数：组件卸载时停止监听，防止内存泄漏
    return () => {
      elements.forEach(element => {
        observer.unobserve(element);
      });
    };
  }, [elements]);
};

const App = () => {
  const array = [...Array(50).keys()];
  const ref = React.useRef(null);

  React.useEffect(() => {
    // DOM挂载完成后再获取元素数组，转成真正的数组（NodeList转数组更稳妥）
    const liElements = ref.current?.querySelectorAll('li');
    const elementsArray = Array.from(liElements || []);
    // 传给自定义Hook
    useIntersectionObserver(elementsArray);
  }, []);

  return (
    <ul ref={ref}>
      {array.map((_, i) => <li key={i}>{i}</li>)}
    </ul>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

关键调整点 #

• 将自定义Hook移到组件外部，遵循React Hook的使用规范。
• 在组件的useEffect中等待DOM挂载完成后，再获取li元素并转成数组，确保传入Hook的是有效可迭代的数组。
• 在Hook内部增加元素数组的存在性判断，避免空值调用forEach。
• 添加清理函数，组件卸载时停止所有元素的监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者JDD