Next.js 13使用layout.js的全局上下文

我正在尝试使用Next.js创建一个具有身份验证和全局用户状态的Web应用程序。一旦用户登录，我希望在导航栏中显示用户，并与可能进行需要用户信息的API调用的子组件共享该用户状态。我正在使用Next.js 13和app目录以及app/layout.js文件来存储我的导航栏和用户状态。
我的问题是，app/layout.js中的导航栏能够在从JSON Web令牌解码后始终显示用户名，但这并不显示在我的子组件（app/loginsuccess/page.jsx）中，它也需要有用户状态。
context/MyContext.js个

import { createContext, useState } from "react";

const MyContext = createContext({
  value: null, 
  setValue: () => {}, 
});

export const MyProvider = ({ children }) => {
  const [value, setValue] = useState(null); 
  
  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

export default MyContext;

字符串
app/layout.jsx个

"use client";

import "./globals.css";
import Link from "next/link";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Cookies from "js-cookie";
import { MyProvider } from "@/context/MyContext";

const getUserFromJWTCookie = async () => {
  const authToken = Cookies.get("token");
  const response = await fetch("/api/session", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ token: authToken }),
  });
  const responseData = await response.json();
  const username = responseData.username;
  if (username) {
    console.log("getUserFromJWTCookie", username);
    return username;
  }
};

export default function RootLayout({ children }) {
  const router = useRouter();
  const [user, setUser] = useState("");

  useEffect(() => {
    (async () => {
      const user = await getUserFromJWTCookie();
      setUser(user);
      if (!user) {
        router.replace("/logintest");
      }
    })();
  }, [router]);

  return (
    <MyProvider value={{ value: user, setValue: setUser }}>
      <html lang="en">
        <body>
          <nav className="bg-gray-800 text-white p-4">
            <ul className="flex justify-center space-x-4">
              <li className="hover:bg-gray-700 rounded-md p-2">
                <Link href="/show">
                  <h1 className="text-xl font-semibold">Shows</h1>
                </Link>
              </li>
              <li className="hover:bg-gray-700 rounded-md p-2">
                <Link href="/user">
                  <h1 className="text-xl font-semibold">Users</h1>
                </Link>
              </li>
              <li className="hover:bg-gray-700 rounded-md p-2">
                <Link href="/loginsuccess">
                  <h1 className="text-xl font-semibold">{user}</h1>
                </Link>
              </li>
            </ul>
          </nav>
          <main>{children}</main>
        </body>
      </html>
    </MyProvider>
  );
}

型
app/loginsuccess/page.jsx个

"use client";

import { useContext, useState, useEffect } from "react";
import MyContext from "@/context/MyContext";

const ProtectedPage = () => {
  const { value } = useContext(MyContext);
  const [user, setUser] = useState("");

  useEffect(() => {
    setUser(value);
  }, [value]);

  return <div>Welcome! {user}</div>;
};

export default ProtectedPage;

型
在我的子组件中同时进行此渲染的任何帮助都非常感谢：）

既然没有回复我的评论，我就假设它猜对了。
显示的代码包括以下内容：

const [user, setUser] = useState("");

  useEffect(() => {
    (async () => {
      const user = await getUserFromJWTCookie();
      setUser(user);
      if (!user) {
        router.replace("/logintest");
      }
    })();
  }, [router]);

字符串
在这段代码中，有两个不同的变量user：状态变量和本地变量（设置为getUserFromJWTCookie的结果）。这段代码可以正常工作，因为第二个（非状态）变量屏蔽了状态变量。
然而，如果你的代码更有趣（也许你只是分享了一个简化的例子？），这种方法可能会导致问题。例如，如果你使用了不同的变量名：

const userFromServer = await getUserFromJWTCookie();
      setUser(userFromServer);
      if (!user) {

型
密码就会被破解为什么因为当你setUser(userFromServer);它不改变user变量.直到下一次渲染（即，直到函数被再次调用）。
这就是state在React中的工作方式：当你调用一个setState函数时，它只在“幕后”改变变量;在函数的其余部分，变量保持其旧值。
顺便说一下，React这样做是因为JavaScript的限制。在JS中没有办法做到：

let x = 5;
 doSomething(x);
 // x = 6 (doesn't work)

型
函数只能在自己的作用域内改变原始变量，而不能在作用域外改变。现在，如果变量是一个对象，你可以**“改变”它：

let x = {};
doSomething(x);
// x.a = 6 (works)

型
.但是由于状态变量可以是对象或原语，它必须对两者都起作用.这意味着React的setState函数不能改变原始的状态变量。

Next.js 13使用layout.js的全局上下文

1条答案

相关问题

热门标签

最新问答