反应挂钩 useState 不更新 onclick

Question

我正在尝试在调用 closehandler 函数时更新边栏 class 但状态未更新。我该怎么做。

function RiderSidebar({ sidebar, close }) {

const [SidebarClass, setSidebarClass] = useState('sidebar')

const closeHandler = (e) => {

    e.preventDefault();
    console.log("closed click");
    setSidebarClass("user-side-bar close")
    console.log("slidebar is " + SidebarClass);

    setTimeout(() => {
        close()
    }, 1000)
}
return (
    <div className={SidebarClass} >
        <button className="close-btn" onClick={closeHandler}>X</button>

        <ul>
            <li><NavLink to='/rider/dashboard' className="user-nav"  ><DashboardIcon />  Dashboard</NavLink></li>
            <li><NavLink to='/rider/orders' className="user-nav"  ><HistoryIcon /> Orders</NavLink></li>
            <li><NavLink to='/user/logout' className="user-nav"  ><PowerSettingsNewIcon /> Logout</NavLink></li>
        </ul>
    </div >
)
}

Answer 1

useState hook 是异步的，不会立即反映..试试这个：

  useEffect(() => {
    
    }, [SidebarClass]);

Answer 2

React 批处理状态更新。如果您在更新状态反应后立即检查状态更新，那么您可能无法获得更新的状态。您可以在 render 方法中检查更新状态。它应该在那里更新。

Answer 3

我想你添加了 useEffect 钩子来检查我简单解释一下你错了什么当您单击 关闭按钮时 关闭处理函数触发器并同时调用 setState 函数（异步）console.log声明打印。 //'side bar'

在你的代码中，你无法验证你的状态是否改变（只能从渲染方法验证）因为 关闭处理函数 只触发一次，如果你想检查你的 className 是否从 console.log 语句更改你必须需要 useEffect 钩子它会在你的 state 每次更改后触发，所以可以符合你的 [=15] =]是否改变

//only trigger one time 
 useEffect(()=>{
 console.log(SidebarClass);//output 'sidebar'
 },[])
        
 //hooks trigger every time after your state changed
  useEffect(()=>{
 console.log(SidebarClass); 
 //output 'sidebar' 
 //output user-side-bar close
            })
        
 //only trigger if SidebarClass state changed
 useEffect(()=>{
 console.log(SidebarClass);
 //output 'sidebar' 
 //output user-side-bar close
 },[SidebarClass]);

反应挂钩 useState 不更新 onclick

React hook useState not updating onclick

reactjs

use-state