使用带有 React 的生成器 function 的奇怪行为

Question

下面是我的精简组件。 它有一个生成器 function 应该循环遍历值。

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>
  );
}

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

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

Answer 1

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>
  );
}