英文:
Costume Hook says array of elements is not iterable
问题
我正在尝试创建一个自定义钩子，用于调用IntersectionObserver来观察ref内的所有li元素。
当我在组件中直接使用它时，它运行得很好：
const App = () => {const array = [...Array(50).keys()];const ref = React.useRef(null);React.useEffect(() => {const observer = new IntersectionObserver((entries) => {entries.forEach((element) => {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>);}
但当我将它分离到一个自定义钩子中时，它报错说它不可迭代：
const App = () => {const array = [...Array(50).keys()];const ref = React.useRef(null);const useCustomHook = (elements) => {React.useEffect(() => {const observer = new IntersectionObserver((entries) => {entries.forEach((element) => {if (element.isIntersecting) {element.target.style.color = 'green';}});});elements.forEach((element) => {observer.observe(element);});}, []);}useCustomHook(ref?.current.querySelectorAll(`li`));return (<ul ref={ref}>{array.map((_, i) => <li key={i}>{i}</li>)}</ul>);}
是否有一种方式可以通过给自定义钩子一个元素数组来实现这一点？
谢谢！ 😊
英文:
I am trying to create a costume hook that calls IntersectionObserver for all of the li elements inside a ref.
When I just use it in the component, it works great:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
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>);
<!-- language: lang-html -->
<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>
<!-- end snippet -->
But When I separate it into a costume hook, it says it is not iterable:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
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>);
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Is there a way to do this with just giving the costume hook an array of elements?
THANKS! 😊
答案1
得分: 0
当你调用这个钩子，并传递ref.current?.querySelectorAll(li)，ref.current仍然是null，所以结果是undefined，无法迭代。
相反，传递一个函数，允许useEffect块在ref已经设置时获取项目：
const useCustomHook = (getElements) => {React.useEffect(() => {const observer = new IntersectionObserver((entries) => {entries.forEach((element) => {if (element.isIntersecting) {element.target.style.color = 'green';}});});const elements = getElements();elements?.forEach((element) => {observer.observe(element);});}, []);};
用法：
useCustomHook(() => ref.current?.querySelectorAll(`li`));
英文:
When you call the hook, and pass ref.current?.querySelectorAll(li), the ref.current is still null, so the result is undefined which not iterable.
Instead pass a function that would allow the useEffect block to get the items when the ref is already set:
const useCostumeHook = (getElements) => {React.useEffect(() => {const observer = new IntersectionObserver((entries) => {entries.forEach((element: any) => {if (element.isIntersecting) {element.target.style.color = 'green';}})})const elements = getElements();elements?.forEach(element => {observer.observe(element);});}, []);}
Usage:
useCostumeHook(() => ref.current?.querySelectorAll(`li`))
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论