React JS - 切换布尔值答案

【问题标题】：React JS - Toggling Booleans [duplicate]React JS - 切换布尔值
【发布时间】：2021-02-24 23:25:32
【问题描述】：

我不太明白 React 如何切换布尔值。所以，我有两个按钮。一个控制台记录状态的当前值（设置为真），另一个将其更新为相反（假）并控制台记录其值。问题是，根据console.log，第二个按钮的状态没有改变，但是当我用第一个按钮检查状态时，它显示状态已更新。

const App = () => {
const[toggle, setToggle] = useState(true);
return(
        
<button onClick={()=>{
            console.log(toggle)
          }}>Button 1</button>
          
<button onClick={()=>{
            setToggle(!toggle)
            console.log(toggle)
          }}>Button 2</button>
}

【问题讨论】：

有时状态更新和反应组件知道它已更新之间存在延迟。尝试在设置状态的函数之外记录切换。
setToggle 不会立即更改 toggle 变量的值 - 这是不可能的。相反，它使用新值安排重新渲染。因此，您的 console.log 运行“为时过早”，无法“看到”变化。
setState 是异步的，每当您单击按钮时，状态都会发生变化，但如果您立即尝试记录它，它将不会显示。
其他相关：setState doesn't update the state immediately 和 State Updates May Be Asynchronous (React docs)

标签： javascript reactjs

【解决方案1】：

useState() 是异步的，因此状态不会在被调用后立即更新。

使用函数useEffect() 来检查状态。将以下行添加到您的App：

useEffect(() => console.log('UseEffect says:',toggle));

另外，导入useEffect：

import React, {useState, useEffect} from 'react';

总之试试这个：

import './App.css';
import React, {useState, useEffect} from 'react';
import SearchPhotos from './SearchPhotos';

const App = () => {
  const[toggle, setToggle] = useState(true);
  
  useEffect(() => console.log('UseEffect says:',toggle));

  return(
    <>
    <button onClick={()=>{
                console.log('button1',toggle)
              }}>Button 1</button>
              
    <button onClick={()=>{
                setToggle(!toggle)
                console.log('button2',toggle)
              }}>Button 2</button>
    </>
  )
}

export default App;

您可以在控制台中看到，useEffect() 显示正确的值。参考：console log the state after using useState doesn't return the current value

【讨论】：