React 中登录表单的条件渲染

问题描述

仅当 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 />}

`

解决方法

完成登录后没有任何反应，因为您的组件状态 isLogged 仍然是 false。 Redux 存储更新，但您的组件没有更新。

无需将 isLogged 存储在状态中。它可以从你的 redux store 的状态中推导出来。

const token = useSelector((state) => state.token.token);

const isLogged = ! (token === null || token === "undefined" || token === "");

return (
    <BookList>
        {!isLogged && <Login />}

但是您可以缩短检查时间，只查看 token 是否为 truthy，因为 ""、null 和 undefined 都是 {{ 3}}。

const token = useSelector((state) => state.token.token);

return (
    <BookList>
        {!token && <Login />}