ReactJS挂钩在点击登录按钮时没有指向其他组件

Question

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

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

当我写上面的代码从按钮调用函数时，console.log会打印"ok"，但当我把代码写为时

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

您可以尝试以下操作：

 //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>
        )

Answer 3

您只是将要呈现的组件返回给函数的调用方。当函数被调用时，Post组件会返回到调用该函数的任何对象，但您可能想要的是从函数组件"返回"它。

根据"isAuthenticated"等变量是否为真，尝试从父级/页面组件有条件地呈现它：

{isAuthenticated && <Post />}

然后，当凭据匹配时，使用自定义函数将isAuthenticated变量设置为true。

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