Javascript 在React中将登录更改为注销

我试图在用户登录时将登录按钮更改为注销。在当前代码中，按钮实际上按照其预期的方式操作（点击login将显示要登录的表单），但按钮最终仍然显示login，但它将允许用户注销。这是我的密码：

const handleSignOut=（）=>{
推动（“/”）；
localStorage.removietem（“令牌”）；
};
const[login，setLogin]=useState（false）
{登录(
{
handleSignOut（）；setLogin（false）；
}}
>
注销
) : (
登录
)}

您需要将初始状态设置为true

const[login，setLogin]=useState（true）//在您的帖子中为false

这应该行得通

//login.js
常量handleSignOut=（）=>{
推动（“/”）；
localStorage.removietem（“令牌”）；
};
const[login，setLogin]=useState（true）
常量handleSubmit=（）=>{
setLogin（false）；
}
{登录(
登录
) : (
{
handleSignOut（）；
setLogin（true）；
}}
>
注销
)}
//假设这是你的表格
//在提交时的表单组件中，调用此回调
“可处理的提交”

请为

setLogin

包含您的

回调

。我认为无论何时登录，您都需要设置登录（true），因此，当我使用此代码时，会发生一些奇怪的事情。它有点工作，但我必须“登录”两次。我最初登录时，它仍然显示“login”，我按下它，它将带我进入登录表单，尽管我仍然登录（如果注销，某些东西将无法访问此代码）"，如果我再次点击login，它会将按钮更改为注销。此外，如果我反复按下按钮，它将在登录或注销后继续更改。请添加表单的代码片段，它是一个单独的组件吗？如果是这种情况，我们需要在提交表单时使用setLogin。nvm@NatsukoIzuki我已更新了我的答案一个回调，试试看，让我知道它是否有效。