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