在 Next.js 中的 router.push 后 useEffect 未觸發

Question

從 login.jsx 提交登錄后，用戶使用router.push('/')導航到 index.jsx。 這兩個文件（更具體的頁面）都位於 /pages 目錄下的根目錄中。 並且所有頁面都會自動將 Layout.jsx 作為布局。 布局文件有 Nav.jsx 組件。 在 Nav.jsx 中，注冊了一個 useEffect 掛鈎，但問題是：在router.push('/')之后它永遠不會觸發我在掛鈎內嘗試了 console.log() 但沒有運氣。 但是，當重新加載頁面或將router.push('/')替換為 window.location.replace('/ window.location.replace('/') ) 時，它會執行掛鈎。 這是我的代碼：

登錄.jsx：

... (previous code)
            axios.post(`/auth/login`, loginForm).then((res) => {
            const {data, token} = res.data;

            localStorage.setItem('auth_token', token);
            localStorage.setItem('user', JSON.stringify(data));

            router.push('/');
... (next code)

布局.jsx：

import Head from 'next/head'
import Nav from "./Nav";

export default function Layout({children}) {
    return (
        <>
            <Head>
                <title>Super site!</title>
                <link rel="icon" href={"/favicon.ico"}/>
            </Head>
            <header>
                <Nav/>
            </header>
            <main>{children}</main>
            <footer>
                <h1>Super site footer</h1>
            </footer>
        </>
    )
}

導航.jsx：

export default function Nav() {
    const router = useRouter();
    const [user, setUser] = useState(null);

    const logout = (e) => {
        e.preventDefault();

        axios.post(`/auth/logout`).then(() => {
            localStorage.removeItem('auth_token');
            localStorage.removeItem('user');

            router.replace('/');
            router.reload();
        }).catch((err) => {
            if (err.response) {
                toast.error(err.response.data.message, toasterOptions('error'));
            } else {
                toast.error(getServerErrorMessage(), toasterOptions('error'));
            }
        });
    }

    useEffect(() => {
        console.log('hi');
        const storedUser = JSON.parse(localStorage.getItem('user'));

        if (storedUser) setUser(storedUser);
    }, []);

    return (
        <>
            <nav className={'sm-nav'}>
                <input type="checkbox" name="menu-btn" id="menu-btn" className={'hidden menu-btn'}/>
                <ul className={'header-ul'}>
                    <li>
                        <Link href="/">
                            <a className={'logo'}>Devlanceer</a>
                        </Link>
                    </li>
                    <li>
                        <label htmlFor="menu-btn" className={'menu-icon bars'}>
                            <FontAwesomeIcon icon={"bars"} className={'md:hidden cursor-pointer'} size={'lg'}/>
                        </label>
                        <label htmlFor="menu-btn" className={'menu-icon times hidden'}>
                            <FontAwesomeIcon icon={"times"} className={'cursor-pointer'} size={'lg'}/>
                        </label>
                    </li>
                </ul>
                <ul className={'dropmenu'}>
                    {
                        user && (
                            <li>
                                <a onClick={logout} className={'pointered'}>Logout</a>
                            </li>
                        )
                    }
                    {
                        !user && (
                            <>
                                <li>
                                    <Link href={'/login'}>
                                        <a>Login</a>
                                    </Link>
                                </li>
                                <li>
                                    <Link href={'/register'}>
                                        <a>Create account</a>
                                    </Link>
                                </li>
                            </>
                        )
                    }
                </ul>
                <Toaster/>
            </nav>
            <nav className={'md-nav'}>
                <ul>
                    <li>
                        <Link href="/">
                            <a className={'logo'}>Super App</a>
                        </Link>
                    </li>
                </ul>
                <ul className={'block md:flex'}>
                    {
                        user && (
                            <li>
                                <a onClick={logout} className={'pointered'}>Logout</a>
                            </li>
                        )
                    }
                    {
                        !user && (
                            <>
                                <li>
                                    <Link href={'/login'}>
                                        <a className={'btn rounded-full'}>Login</a>
                                    </Link>
                                </li>
                                <li>
                                    <Link href={'/register'}>
                                        <a className={'btn rounded-full btn-primary'}>Create account</a>
                                    </Link>
                                </li>
                            </>
                        )
                    }
                </ul>
            </nav>
        </>
    )
}

我怎樣才能解決這個問題？ 我希望在 Nav.jsx 組件上執行 useEffect() 掛鈎。

Answer 1

如果你在沒有括號的情況下編寫你的鈎子會發生什么？ 來自文檔：

如果你想運行一個效果並且只清理一次（在掛載和卸載時），你可以傳遞一個空數組（[]）作為第二個參數。

useEffect(() => {
    console.log('hi');
    const storedUser = JSON.parse(localStorage.getItem('user'));

    if (storedUser) setUser(storedUser);
});

在 Next.js 中的 router.push 后 useEffect 未觸發

問題描述

1 個解決方案

解決方案1
0 2021-11-27 22:07:51

在 Next.js 中的 router.push 后 useEffect 未觸發

問題描述

1 個解決方案

解決方案1 0 2021-11-27 22:07:51

解決方案1
0 2021-11-27 22:07:51