使用钩子注销React中的链接

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