反应钩子useState不更新onclick答案

【问题标题】：React hook useState not updating onclick反应钩子useState不更新onclick
【发布时间】：2021-03-06 11:37:40
【问题描述】：

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

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 >
)
}

【问题讨论】：

你的意思是console.log没有更新？
but the state is not updating - 请解释一下，你在哪里检查这个？
@DiwakarSingh 当我单击关闭按钮时，如果我在 closeHandler 函数上使用 console.log 进行检查。但它会在控制台上显示侧边栏。
@nnam4x React 批量更新状态。如果您在更新状态响应后立即检查状态更新，那么您可能无法获得更新后的状态。您可以在 render 方法中检查更新的状态。请验证您是否在那里获得了更新的状态？
@DiwakarSingh 是的，它正在更新渲染。谢谢

标签： reactjs use-state

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

在您的代码中，您无法验证您的状态更改与否（只有您可以通过渲染方法进行验证），因为如果您想检查您的@，关闭的处理函数只会触发一次987654325@ 是否从 console.log 语句中更改与否，您必须需要 useEffect 钩子，它会在您的 state 更改后每次触发，因此可以符合您的 className 是否更改

//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]);

【讨论】：

【解决方案3】：

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

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

【讨论】：