Question

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

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

当我编写上述用于从button调用函数的代码时，console.log打印'ok'，但是当我将代码编写为

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

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

Answer 1

您只将要渲染的组件返回给函数的调用者。调用该函数时，Post组件将返回到所谓的函数，但是您可能想要的是从一个函数组件中“返回”它。

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

{isAuthenticated && <Post />}

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

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

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

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

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;

单击登录按钮时，ReactJS钩子未定向到其他组件

3 个答案: