在onClick处理程序中设置useState时出现问题

Question

我在onClick处理程序中使用useState挂钩来更改和跟踪focus状态。我最初将其设置为false，然后在处理程序中多次将其更改为true和false。每次更改后，我都会执行console.log(focus)，并且我希望它与所做的更改相对应。

function App() {
const [focus, setFocus] = useState(false);
return (
<div
className="App"
onClick={() => {
console.log(focus);
setFocus(true);
console.log(focus);
setFocus(false);
console.log(focus);
}}
>
<h1>App</h1>
</div>
);
}

在我的情况下，在这个代码片段中，我希望在控制台中再次看到false、true和false，但我看到的都是false。

为什么会发生这种情况？我觉得我错过了一些基本的东西。

Answer 1

设置状态时，组件将被重新渲染。状态变化在本质上是不同步的。试着在useState行下面添加一个console.log，你会发现每次设置焦点时都会调用它，因为整个组件都会被重新渲染。