时间戳

首页 > 解决方案 > 使用 Hooks 在 React 中注销链接

reactjs - 使用 Hooks 在 React 中注销链接

问题描述

我正在使用一个简单的布尔标志来设置用户是登录还是注销以进行条件渲染。我已经加倍使用这个标志来使用它作为注销的一种方式。我收到一个 TypeError，它说我的 setIsLoggedIn 不是一个函数，但是我在程序的另一个区域中以类似的方式使用它。

应用程序.js：

  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div className="App">
      <Switch>
        <Route
          path="/login"
          render={() => (
            <Login
              isLoggedIn={isLoggedIn}
              setIsLoggedIn={setIsLoggedIn}
            />
          )}
        />
      </Switch>
    </div>
  );

SignedInLinks 组件的部分代码：

const SignedInLinks = ({ isLoggedIn, setIsLoggedIn }) => {

    const handleLogout = (e) => {
        e.preventDefault();
        setIsLoggedIn(false);
    }
    return (
            <li><NavLink to='/login' onClick={handleLogout}>Logout</NavLink> 
            </li>
           )

错误正是“TypeError：setIsLoggedIn 不是函数”

标签： reactjsreact-hooks

解决方案

使用 Hooks 登录/注销的示例应用程序

钩子.js

function Hooks() {
  const [loggedIn, setLoggedIn] = React.useState(false);
  const handleClick = e => {
    setLoggedIn(!loggedIn);
  };
  return (
    <div>
      {loggedIn ? (
        <SignOut handleClick={handleClick} />
      ) : (
        <SignIn handleClick={handleClick} />
      )}
    </div>
  );
}
export default Hooks;

登录.js

function SignIn(props) {
  return (
    <div>
      <h3>Please signin</h3>
      <button onClick={props.handleClick}>signin</button>
    </div>
  );
}

SignOut.js

function SignOut(props) {
  return (
    <div>
      <h3>Yay....You are loggedin</h3>
      <button onClick={props.handleClick}>signout</button>
    </div>
  );
}

推荐阅读