Внутренняя функция React setState не считывается с первого раза

#javascript #node.js #reactjs #infinite-scroll #setstate

#javascript #node.js #reactjs #бесконечная прокрутка #setstate

Вопрос:

Я использую counter , начиная с 0 , для перебора фрагментов массива, подобных useState(vidChunks[counter]) , и используя компонент npm react-infinite-scroll, я вызываю функцию через компонент fetchMoreData InfiniteScroll каждый раз vidList.length , когда достигается. Он работает нормально, но в первый раз, когда он повторяет один и тот же фрагмент видео, и я не могу понять, почему. Это похоже на то, что он рассматривает vidChunks [0] и vidChunks [1] одно и то же содержимое, но это не так, я отладил его вместе со счетчиком, который также увеличивается правильно.

 const vidChunks = _.chunk(vidArray, 5)

const [counter, setCounter] = useState(0)
const [vidList, setVidList] = useState(vidChunks[counter])

console.log("counter " counter)

const fetchMoreData = () => {
  setCounter(counter   1)

  if (vidChunks[counter] === undefined || vidChunks[counter] == null) {
    setLoadText('Loaded all videos')
    return;
  }
    const newVidList = [ ...vidList, ...vidChunks[counter] ]
    setVidList(newVidList);
}

1. Новое counter значение из setCounter не будет доступно до следующего рендеринга.

2. Можете ли вы попробовать изменить setCounter функцию со стрелкой setCounter((counter) => counter 1) ?

3. Пробовал, но это не сработало:( -Я также попытался поместить setCounter в функцию, которая затем вызвала функцию fetchMoreData, но у меня был тот же результат

Ответ №1:

Новое counter значение из setCounter() вызова не будет доступно до следующего рендеринга.

Вместо этого создайте переменную newCounter из старого counter значения, используйте ее для своей промежуточной логики, а затем вызывайте setCounter() с ней.

 const fetchMoreData = () => {
  
  const newCounter = counter   1;

  if (vidChunks[newCounter] === undefined || vidChunks[newCounter] == null) {
    setLoadText('Loaded all videos')
    return;
  }
    const newVidList = [ ...vidList, ...vidChunks[newCounter] ]
    setVidList(newVidList);
    setCounter(newCounter);
}