时间戳

首页 > 解决方案 > React 中登录表单的条件渲染

reactjs - 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 />}

`

标签： reactjsauthenticationreduxconditional-rendering

解决方案

完成登录后没有任何反应，因为您的组件状态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 />}

推荐阅读