在循環的每次迭代中更新 useState 變量后，React 子組件不會重新渲染

Question

我有一個循環遍歷數組的 React 父組件 - 對於數組中的每個元素，我想增加進度表子組件中的計數器，該組件顯示“處理行 x” ，其中 x 是從父級傳遞的當前行號.

當前行號保存在使用useState()掛鈎在父級中設置的狀態變量中。 我正在通過子組件的道具將該變量傳遞給子組件。

我遇到的問題是子組件僅使用循環中設置的最后一個狀態值重新呈現。

這里的簡化示例： 代碼沙盒

我希望子組件在父組件每秒更新一次后顯示當前值； 它應該從 0-5 開始計數，但是在 5 秒暫停后它會直接跳到 5。

將這樣的值傳遞給子組件以便子組件在每次循環中增加值時重新渲染的正確方法是什么？

Answer 1

發生這種情況是因為您正在使用 while 循環來超時每個增量網絡。 這會阻止渲染，並且在 while 循環執行完成之前它不會實際渲染。

要修復它，您應該改用 setTimeout。 像這樣的東西

useEffect(() => {
  if (value >= 5) return;
  const timeout = setTimeout(() => {
    setValue(value + 1);
  }, 1000);
  return () => clearTimeout(timeout);
}, [value]);