Question

我正在尝试在调用 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 >
)
}

Answer 1

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

Answer 2

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

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

Answer 3

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

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

className

React hook useState 不更新 onclick

3 个答案: