React JS-切换布尔值

Question

我不太明白React是如何切换布尔值的。所以，我有两个按钮。一个console.log记录状态的当前值(设置为true(，另一个将其更新为相反值(false(，console.log则记录其值。问题是，根据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>
}

Answer 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()显示了正确的值。参考：控制台记录使用useStatedons'；t返回当前值