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

Question

下面是我的精简组件。它有一个生成器函数，应该在值之间循环。

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

这种行为很奇怪。在按钮上显示一个新值需要单击一次，然后单击两次，再单击一次等等。状态是"；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>
);
}