在React中有条件地呈现Login表单

Question

我试图呈现登录表单只有当没有令牌在redux商店。当我加载页面时，一切正常，我看到表单。正确完成登录后，什么也没有发生，我必须刷新页面。

如何更新页面?

const [isLogged, setIsLogged] = useState(false);
const token = useSelector((state) => state.token.token);
useEffect(() => {
if (token === null || token === "undefined" || token === "") {
return setIsLogged(false);
} else {
return setIsLogged(true);
}
}, []);
return (
<BookList>
{!isLogged && <Login />}

Answer 1

完成登录后没有任何事情发生，因为您的组件状态isLogged仍然是false。redux存储更新，但您的组件没有。

不需要将isLogged保存在状态。它可以从您的redux存储的状态中派生出来。

const token = useSelector((state) => state.token.token);
const isLogged = ! (token === null || token === "undefined" || token === "");
return (
<BookList>
{!isLogged && <Login />}

但是你可以缩短你的检查，看看token是否为真，因为""、null和undefined都是假的。

const token = useSelector((state) => state.token.token);
return (
<BookList>
{!token && <Login />}