当 EventListener 调用时，useState 钩子 setter 仅运行一次

Question

在我的功能组件中，我使用 useState 挂钩存储状态。每次我的用户到达页面底部时，我都想添加内容。所以我在 useEffect 挂钩内的 'scroll' 上添加了一个 EventListener。事情是它在我第一次到达底部时被触发，我的新内容出现并且我的页面长度增加所以我可以进一步滚动。但是，没有什么附加的。使用 console.log 我检查了我的事件是否触发良好，它是 !

似乎给事件监听器的回调函数卡在了过去，我的setterreturns和第一次一样的状态！

gameTeasersToShow 函数有 12 个元素，我知道如果它有效，如果我向下滚动一定时间就会崩溃，因为数组不会包含足够的元素。这是一个测试。

function Index ({ gameTeasersToShow }) {
  console.log(useScrollToBottomDetec())
  const [state, setState] = React.useState([gameTeasersToShow[0], gameTeasersToShow[1], gameTeasersToShow[2]])

  function handleScrollEvent (event) {
    if (window.innerHeight + window.scrollY >= (document.getElementById('__next').offsetHeight)) {
      setState([...state, gameTeasersToShow[state.length]])
    }
  }

  React.useEffect(() => {
    window.addEventListener('scroll', handleScrollEvent)
    return () => {
      window.removeEventListener('scroll', handleScrollEvent)
    }
  }, [])

  return (
    <>
      {
        state.map(item => {
          const { title, data } = item
          return (
            <GameTeasers key={title} title={title} data={data} />
          )
        })
      }
    </>
  )
}

Answer 1

你能试试吗？

function handleScrollEvent (event) {
    if (window.innerHeight + window.scrollY >= (document.getElementById('__next').offsetHeight)) {
      setState(oldState => [...oldState, gameTeasersToShow[oldState.length]])
    }
  }

当 EventListener 调用时，useState 钩子 setter 仅运行一次

useState hook setter is running only once when called by an EventListener

javascript

event-listener

reactjs

next.js

react-hooks

当 EventListener 调用时，useState 钩子 setter 仅 运行 一次

useState hook setter is running only once when called by an EventListener

javascript

event-listener

reactjs

next.js

react-hooks

当 EventListener 调用时，useState 钩子 setter 仅运行一次