ReactJS/NextJS - useState 崩溃选项卡

Question

在第 27 行， setOpenAddFolders(true)导致整个选项卡冻结。 我什么都试过了，到处找，什么都没有。 我在不同的文件中使用了类似的代码（设置一个 usestate var），它可以工作，但下面的代码将无法工作。

我确实也添加了console.log ，但它表明 setState 没有做任何事情，而只是使整个选项卡崩溃。

这是来自终端的错误（请注意，这是在选项卡冻结之后）：

error - uncaughtException: Error: No router instance found. you should only use "next/router" inside the client side of your app. https://nextjs.org/docs/messages/no-router-instance
    at noRouter (D:\xxxxx\node_modules\next\dist\server\render.js:54:11)
    at ServerRouter.push (D:\xxxxx\node_modules\next\dist\server\render.js:73:9)
    at Timeout.eval [as _onTimeout] (webpack-internal:///./pages/storage/uploadFiles.tsx:37:24)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)```

import {useRouter} from "next/router";
import React, {useState} from "react";
import {BsArrowDownCircle} from "react-icons/bs";
import {auth} from "./../../firebase"; 
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function uploadFiles() {
    const router = useRouter();
    const [loggedIn, setLoggedIn] = useState(false);
    const [openAddFolders, setOpenAddFolders] = useState(false);
    auth.onAuthStateChanged(function(user) {
    if (user) {
        setLoggedIn(true);
    }else{
        toast.error("Please Sign In, You Are Being Redirected");
        setTimeout(function(){
            router.push("/");
        }, 5000);
    }
    });
   

    function openAddFoldersMenu()
    {
        setOpenAddFolders(true);
    }


    function openUploadImagesMenu()
    {
        console.log("b");
    }

    return(
        <React.Fragment>
            <ToastContainer />
            {loggedIn ?
                <div className="flex items-center justify-center">
                    <div className="w-1/2">
                        <div onClick={openAddFoldersMenu} className="hover:cursor-pointer my-10 rounded-t-3xl w-full p-9 hover:bg-cyan-400 hover:text-white hover:shadow-cyan-500/50 shadow-lg ease-linear duration-100">
                            <div className="flex justify-between">
                                <h1>Add Folders</h1>
                                <BsArrowDownCircle className="animate-bounce" size={20} />
                            </div>
                            {/* <div className={addFolders ? "" : "hidden"}>
                                Some Information
                                
                            </div> */}
                        </div>

                        <div onClick={() => openUploadImagesMenu()} className="hover:cursor-pointer rounded-t-3xl w-full p-9 hover:bg-cyan-400 hover:text-white hover:shadow-cyan-500/50 shadow-lg ease-linear duration-100">
                            <div className="flex justify-between">
                            <h1>Upload Images</h1>
                                <BsArrowDownCircle className="animate-bounce" size={20} />
                            </div>
                            <div className="hidden">
                                Some Information
                            </div>
                        </div>
                    </div>
                </div>
            :
            <div className="w-[100vw] h-[100vh] bg-red-500 flex items-center justify-center">
                <h1 className="text-gray-50 text-7xl text-center">There Was A Problem Loading, <br /> Please Sign In</h1>
            </div>
            }
        </React.Fragment>
        
    );    
};

Answer 1

经过大量的修补，我发现了问题，每次屏幕上的内容更新时都会调用firebase的auth.onAuthStateChanged ，所以我用useEffect包装了auth.onAuthStateChanged

这是更新的代码：

useEffect(()=>{
        auth.onAuthStateChanged(function(user) {
            if (user) {
                setLoggedIn(true);
            }else{
                toast.error("Please Sign In, You Are Being Redirected");
                setTimeout(function(){
                    router.push("/");
                }, 5000);
            }
        });
    },[])