ReactJS 钩子在单击登录按钮时未指向其他组件

Question

当我的用户名和密码与该值匹配时，我试图在 reactjs 中呈现一个新组件，但它不会呈现给其他组件，而是在 console.log 中给出结果

const loginSubmit = (e) => {
            e.preventDefault()
            if(username === 'molly' && password === '123'){
                console.log('ok')
            }
        }

当我编写上述代码以从按钮调用 function 时，console.log 打印“确定”但是当我将代码编写为

const loginSubmit = (e) => {
            e.preventDefault()
            if(username === 'molly' && password === '123'){
                return(<Post />)
            }
        }

为什么不渲染 Post 组件？？？ 只有在单击提交按钮后，它才会卡在登录页面中。 请帮帮我

Answer 1

如果它重定向到新页面，您可以这样做。

import React from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
    const history = useHistory();

    const loginSubmit = (e) => {
            e.preventDefault();
            if(username === 'molly' && password === '123'){
                history.push("/path/to/redirect");
            }
        }

   

    return (
        <div>
            <button onClick={loginSubmit} type="button" />
        </div>
    );
}

export default MyComponent;

Answer 2

您只是将要呈现的组件返回给 function 的调用者。 当调用 function 时，Post 组件将返回到称为 function 的任何位置，但您可能想要从 ZC1C425268E68385D1AB5074C17A94F 组件“返回”它。

尝试根据像“isAuthenticated”这样的变量是否为真有条件地从您的父/页面组件呈现它：

{isAuthenticated && <Post />}

然后在凭据匹配时使用您的自定义 function 将 isAuthenticated 变量设置为 true。

编辑：根据您在问题下方的评论进行更新。 如果该组件已经设置为在 /posts 路由上渲染，只需在 formSubmit 上的 isAuthenticated 为 true 时重定向到 /posts 路由，然后让组件自动进行渲染。

Answer 3

你可以尝试这样的事情：

 //Hook Logged const [LoggedIn, setLoggedIn] = useState(false) const loginSubmit = (e) => { e.preventDefault() if(username === 'molly' && password === '123'){ setLoggedIn(true) } } if (LoggedIn() ) return ( <div> <Post /> </div> ) else return ( <div> <LoginForm/> </div> )