React: For循环未检测到Hook的状态更改

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    for (let i = 0; i < 10; i++) {
      // 错误示例：在循环内部调用useState Hook
      // useState必须在函数的顶层调用
      // const [newCount, setNewCount] = useState(0);
      
      // 正确示例：将循环内部的代码提取到独立函数中
      updateCount(i);
    }
  };

  const updateCount = (value) => {
    // 在这里可以安全地使用useState Hook
    setCount(count + value);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default MyComponent;