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)
}, [...])