Javascript 使用带有React的生成器函数的奇怪行为

下面是我的精简组件。它有一个生成器函数，可以循环遍历值

const App = () => {
  const [state, setState] = useState("1")

  function* stateSwitch () {
    while (true){
      yield "2"
      yield "3"
      yield "1"
    }
  }

  const stateSwitcher = stateSwitch()

  const handleClick = event => {
    event.preventDefault()
    console.log(stateSwitcher.next().value)
    setState(stateSwitcher.next().value)
  }

  return (
    <div className="App">
      <button onClick = {handleClick}>{state}</button>
    </div>
  );
}

const-App=（）=>{
常量[状态，设置状态]=使用状态（“1”）
函数*状态开关（）{
while（true）{
收益率“2”
收益率“3”
收益率“1”
}
}
const stateSwitcher=stateSwitch（）
const handleClick=事件=>{
event.preventDefault（）
console.log（stateSwitcher.next（）.value）
setState（stateSwitcher.next（）.value）
}
返回(
{state}
);
}

这种行为很奇怪。获取按钮上显示的新值需要单击一次，然后单击两次，然后再次单击一次，以此类推。状态有时为“3”，但仅记录“1”和“2”

---

我不明白这是怎么发生的，我想这与React组件生命周期有关，我还不知道。有人能帮我吗？

console.log（stateSwitcher.next（）.value）和

setState（stateSwitcher.next（）.value）

中的一个或另一个正在消耗一个收益

生成器也会在每个渲染周期中重新定义

试试看

function* stateSwitch() {
  while (true) {
    yield "2";
    yield "3";
    yield "1";
  }
}

const stateSwitcher = stateSwitch();

export default function App() {
  const [state, setState] = useState("1");

  const handleClick = (event) => {
    event.preventDefault();
    const value = stateSwitcher.next().value;
    console.log(value);
    setState(value);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>{state}</button>
    </div>
  );
}

函数*stateSwitch（）{
while（true）{
产量为“2”；
产量为“3”；
产量为“1”；
}
}
const stateSwitcher=stateSwitch（）；
导出默认函数App（）{
常量[状态，设置状态]=使用状态（“1”）；
常量handleClick=（事件）=>{
event.preventDefault（）；
const value=stateSwitcher.next（）.value；
console.log（值）；
设置状态（值）；
};
返回(
{state}
);
}