在 onClick 处理程序中设置 useState 时出现问题 [重复]答案

【问题标题】：Problems setting useState inside onClick handler [duplicate]在 onClick 处理程序中设置 useState 时出现问题 [重复]
【发布时间】：2019-10-28 19:31:47
【问题描述】：

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

就我而言，在这段代码 sn-p 中，我希望在控制台中看到 false、true，然后再次看到 false，但我看到所有这些 false。

为什么会这样？我觉得我在这里遗漏了一些非常基本的东西。

【问题讨论】：

标签： javascript react-hooks

【解决方案1】：

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

【讨论】：