Question

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

App.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不是函数”

Answer 1

在App.js中定义handleLogout

const handleLogout = (e) => {
        e.preventDefault();
        setIsLoggedIn(false);
    }


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

Answer 2

使用钩子登录/注销的示例应用

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;

SignIn.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>
  );
}

使用Hooks在React中注销链接

2 个答案: