React JS - 切换布尔值

Posted 2023-02-21

【中文标题】React JS - 切换布尔值

【英文标题】：React JS - Toggling Booleans [duplicate]

【发布时间】：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)

【参考方案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