React組件中for循環內的setTimeout永遠不會停止迭代

Question

我正在嘗試在 React 中創建一個簡單的計數器組件。 它應該從 0 開始，然后迭代到傳入的數字。 這是我目前擁有的代碼：

const Counter = ({ number }) => {
  const [currentNumber, setCurrentNumber] = useState(0);

  for (let i = 0; i < number; i++) {
    setTimeout(() => setCurrentNumber(currentNumber + 1), 2000);
  }

  return <span>{currentNumber}</span>;
};

export default Counter;

當我運行它時會發生什么，它基本上一直在計數。 currentNumber永遠不會停止遞增，即使達到該number也是如此。

Answer 1

您應該添加currentNumber作為useEffect()的依賴項。 這樣useEffect()將每秒觸發一次，並且將注冊一個新的超時，但前提是currentNumber小於number 。

 const Counter = ({ number }) => { const [currentNumber, setCurrentNumber] = React.useState(0); React.useEffect(() => { if(currentNumber < number) setTimeout(() => setCurrentNumber(currentNumber + 1), 1000); }, [currentNumber]); return <span>{currentNumber}</span>; }; ReactDOM.render(<Counter number={20}/>, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

請嘗試以下代碼：

const [currentNumber, setCurrentNumber] = useState(0);

useEffect(() => {
    if (currentNumber >= number) return;
    setTimeout(() => {
        setCurrentNumber(currentNumber + 1);
    }, 1000);
}, [currentNumber]);

return <span>{currentNumber}</span>;

Answer 3

我運行了代碼，它卡住了。 原因：

您正在安排 5 個計時器，它們都會將currentNumber更新為currentNumber + 1 。 currentNumber為0 ，因此它將在 2 秒后將number次更新為1 。 您可以使用間隔或useEffect來解決此問題：

useEffect(() => {
  if (currentNumber < number)
    setTimeout(() => setCurrentNumber(n => n + 1), 2000)
}, [number, currentNumber])

如果您使用間隔，請確保從useEffect返回清理回調，如下所示：

useEffect(() => {
  const id = useInterval(...)
  return () => clearInterval(id)
}, [...])