window.addEventListener 未按预期更新状态

Question

我想从头开始构建无限滚动。这是代码：

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的原因。但我找不到任何代码解决方案。

Answer 1

在第一个useEffect依赖数组中是空的，这意味着如果您在其中使用任何状态变量，它的值不会在效果中改变正如我所看到的，您正在使用scrollNumber设置的下一个状态setScrollNumber(scrollNumber + 1);和值scrollNumber不会改变内部效果，因为依赖项数组为空因此，如果您对效果进行了任何更改，您必须告诉反应重新初始化效果scrollNumber所以scrollNumber作为一个依赖项会为你工作&nbsp;useEffect(() => {&nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; function scrollHandler(){&nbsp; &nbsp; &nbsp; &nbsp; if(containerRef.current?.getBoundingClientRect().bottom === window.innerHeight) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Salam", scrollNumber);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setScrollNumber(scrollNumber + 1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; window.addEventListener("scroll", scrollHandler);&nbsp; &nbsp; return () => window.removeEventListener("scroll", scrollHandler);.....}, [scrollNumber]) //add a dependency