javascript - 在 React 中将登录更改为注销

Question

我正在尝试在用户登录时将登录按钮更改为注销。使用当前代码，该按钮实际上按预期执行（点击登录将显示登录表单），但按钮最终仍然说登录，但它会让用户注销。这是我的代码：

  const handleSignOut = () => {
    push("/");
    localStorage.removeItem("token");
  };
  const [login, setLogin] = useState(false)
 
 
 {login ? (
                <Link
                  className="link"
                  to="/"
                  onClick={() => {
                    handleSignOut(); setLogin(false);
                  }}
                >
                  Logout
                </Link>
              ) : (
                  <Link className="link" to="/">
                    Login
                  </Link>
                
              )}

我已经包含了最初设置为 false 的 handlesignout 和用于登录的 usestate。

标签： javascriptreactjsjsx

Answer 1

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

const [login, setLogin] = useState(true) // 你的帖子是假的

这应该有效。

// login.js
const handleSignOut = () => {
    push("/");
    localStorage.removeItem("token");
  };
  const [login, setLogin] = useState(true)

 const handleSubmit = () => {
   setLogin(false);
 }
 
 
 {login ? (
                
             <Link className="link" to="/">
                    Login
             </Link>
              ) : (
                  <Link
                    className="link"
                    to="/"
                    onClick={() => {
                       handleSignOut(); 
                       setLogin(true);
                    }}
                  >
                  Logout
                  </Link>
                
              )}

     // assuming this is your form
     // in your Form component on submitting, call this callback 
     "handleSubmit"
     <Form 
       onSubmit={handleSubmit}
     />