Next.js 期望服务器HTML包含匹配的<；输入>；在<；部门>；_Next.js

Next.js 期望服务器HTML包含匹配的<；输入>；在<；部门>；

next.js

Next.js 期望服务器HTML包含匹配的<；输入>；在<；部门>；,next.js,Next.js,每当我检查是否存在已授权的条件（true或false），我都会在控制台上收到此错误消息。基本上，错误是指服务器端渲染，但我无法确定应该在哪里修复它。当我删除isAuthorized时，错误消失我有我的上下文，根据cookie中是否存在令牌，我返回isAuthorized为true或false GlobalContext.js const Global = createContext(); export function GlobalContextProvider({ children })

每当我检查是否存在已授权的条件（true或false），我都会在控制台上收到此错误消息。基本上，错误是指服务器端渲染，但我无法确定应该在哪里修复它。当我删除isAuthorized时，错误消失

我有我的上下文，根据cookie中是否存在令牌，我返回isAuthorized为true或false

GlobalContext.js

const Global = createContext();

export function GlobalContextProvider({ children }) {
  const { push } = useRouter();

  const userCookie = Cookies.getJSON("user");

  const [authUser, setAuthUser] = useState(() => {
    if (userCookie) return userCookie;
    if (!userCookie) return {};
  });

  const [isAuthorized, setIsAuthorized] = useState(() => {
    return !authUser || Object.keys(authUser).length == 0 ? false : true;
  });

  useEffect(() => {
    if (!isAuthorized) {
      return push("/auth/login");
    }
  }, [isAuthorized]);

  const value = {
    isAuthorized,
    setIsAuthorized,
    authUser,
    setAuthUser,
  };

  return <Global.Provider value={value}>{children}</Global.Provider>;
}

export const useGlobalContext = () => useContext(Global);

const Global=createContext（）；
导出函数GlobalContextProvider（{children}）{
const{push}=useRouter（）；
const userCookie=Cookies.getJSON（“用户”）；
const[authUser，setAuthUser]=useState（（）=>{
如果（userCookie）返回userCookie；
如果（！userCookie）返回{}；
});
const[isAuthorized，setIsAuthorized]=useState（（）=>{
return！authUser | | Object.keys（authUser）.length==0？false:true；
});
useffect（（）=>{
如果（！未授权）{
返回推送（“/auth/login”）；
}
}，[未授权]；
常量值={
没有授权，
setIsAuthorized，
authUser，
setAuthUser，
};
返回{children}；
}
导出常量useGlobalContext=（）=>useContext（全局）；

Index.jsx

export default function PanelLayout({ children, title }) {
  const { push } = useRouter();
  const { isAuthorized, setIsAuthorized } = useGlobalContext();

  useEffect(() => {
    const userData = Cookies.getJSON("user");

    if (!userData || !userData.access_token) {
      return push("/auth/login");
      setIsAuthorized(false);
    }
  }, []);

  return (
    <>
      {isAuthorized && (
        <>
          <Head>
          // Content
          </Head>
          <input type="checkbox" id="sidebar-toggle" />
          <div className="main-content">
           // Content
          </div>
        </>
      )}
    </>
  );
}

导出默认功能面板布局（{children，title}）{
const{push}=useRouter（）；
const{isAuthorized，setIsAuthorized}=useGlobalContext（）；
useffect（（）=>{
const userData=Cookies.getJSON（“用户”）；
如果（！userData | |！userData.access|u令牌）{
返回推送（“/auth/login”）；
setIsAuthorized（false）；
}
}, []);
返回(
{已授权&&(
//内容
//内容
)}
);
}

在放置所有带组件的管线的管线文件中使用此代码。如果满足此条件，则将此useEffect放在那里，并授予对该路由的访问权限，否则将其重定向到登录

  useEffect(() => {
    const userData = Cookies.getJSON("user");

    if (!userData || !userData.access_token) {
      return push("/auth/login");
      setIsAuthorized(false);
    }
  }, []);

useGlobalContext

来自哪里？你能分享它的代码吗？@juliomalves我用上下文编辑了我的问题行

constusercookie=Cookies.getJSON（“用户”）

应该发生在

useffect

中。非常有必要将它放在useffect中，谢谢@朱利奥马尔夫斯