使用帶有 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>
  );
}