我想從頭開始構建無限滾動。這是代碼：import React,{useEffect, useRef, useState} from 'react';const Container:React.FC<{}> = () => {  const containerRef = useRef<HTMLDivElement | null>(null)  const [ scrollNumber, setScrollNumber ] = useState<number>(1);  const [posts, setPosts] = useState<any[]>([]); useEffect(() => {  async function main(){      const req = await  fetch('https://jsonplaceholder.typicode.com/posts');      const result = await req.json();      const pst = result.splice(0,10*scrollNumber);      setPosts(pst)    function scrollHandler(){   if(containerRef.current?.getBoundingClientRect().bottom === window.innerHeight){          console.log("Salam", scrollNumber);          setScrollNumber(scrollNumber + 1);        }  }  window.addEventListener("scroll", scrollHandler);  return () => window.removeEventListener("scroll", scrollHandler);  }  main()},[]) useEffect(() => {  const loadData = async () => {    const req = await  fetch('https://jsonplaceholder.typicode.com/posts');    const result = await req.json();    const pst = result.splice(0,10*scrollNumber);    setPosts(pst)  }  loadData() },[scrollNumber])  return (    <div  ref={containerRef}>      {posts.map(post => (        <div key={post.id}>          <br/>          <h1>{post.title}</h1>      (<p>{post.body}</p>)      <code>{post.userId}</code>      <br/><br/>      <hr/>        </div>      ))}    </div>  )}export default Container但有一個問題。當我測試它時。它總是更新為 2 沒有其他。我搜索了一下。我發現window.addEventListener只記住initialState，這就是state總是更新為2的原因。但我找不到任何代碼解決方案。