函数内部的 React setState 第一次没有被读取

Question

我使用 counter 从 0 开始遍历数组块，例如 useState(vidChunks[counter])，并使用 npm react-infinite-scroll-component 每次达到 vidList.length 时，我都会通过 InfiniteScroll 组件调用 fetchMoreData 函数。它工作正常，但第一次，它重复完全相同的视频块，我不明白为什么。好像它认为 vidChunks[0] 和 vidChunks[1] 是相同的内容，但它不是，我将它与 counter 一起调试，它也正确增加。

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

Answer 1

来自 setCounter() 调用的新 counter 值在下一次渲染之前不可用。

相反，从旧的 counter 值创建一个新的 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);
}

函数内部的 React setState 第一次没有被读取

React setState inside function doesn't get read the first time

javascript

node.js

setstate

infinite-scroll

reactjs