Установщик ловушек useState запускается только один раз при вызове EventListener - PullRequest
Новая
       20

Установщик ловушек useState запускается только один раз при вызове EventListener

1 голос
/ 17 апреля 2020

В моем функциональном компоненте я сохраняю состояние с помощью ловушки useState. Каждый раз, когда мой пользователь попадает в конец страницы, я хочу добавить контент. Поэтому я добавил EventListener на scroll внутри ловушки useEffect. Дело в том, что он срабатывает при первом достижении дна, появляется мой новый контент и увеличивается длина страницы, поэтому я могу прокручивать дальше Но тогда ничего не добавляется. С помощью console.log я проверил, правильно ли запущено мое событие, и оно таково!

Кажется, что функция обратного вызова, передаваемая слушателю событий, застряла в прошлом, и мой установщик возвращает то же состояние, что и в первый раз!

Функция gameTeasersToShow имеет 12 элементов, я знаю, что, если бы она работала, она бы достигла sh, если бы я прокрутила определенное время, потому что массив не содержал бы достаточно элементов. Это тест. 

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} />
          )
        })
      }
    </>
  )
}

1 Ответ

0 голосов
/ 17 апреля 2020

Можете ли вы попробовать это? 

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