Next.js中React Context全局状态无法更新问题排查求助

核心问题是Context Provider的位置违反了HTML结构规范，导致状态无法正确传递给Home组件。

在Next.js App Router的RootLayout中，你把MyContext.Provider放在了<html>和<body>标签之间，但HTML标准要求<body>必须是<html>的直接子元素，这种写法会让React渲染的DOM结构不符合规范，最终Home组件只能拿到Context的默认值""，完全接收不到RootLayout里的状态更新。

另外你的Home组件里<button>标签没闭合，这也会导致DOM渲染异常，顺带一起修复。

修正后的代码 #

layout.tsx

import { MyContext } from "@/context/myContext";
import { useState } from "react";
import Home from "@/pages/home"

export default function RootLayout({ children }) {
  const [value, setValue] = useState("init");
  const valueStore = { value, setValue };
  return (
    <html lang="en">
      <body>
        {/* 将Provider放到body内部，作为body的子元素 */}
        <MyContext.Provider value={valueStore}>
          <Home/>
        </MyContext.Provider>
      </body>
    </html>
  );
}

home.tsx

import { useContext } from "react";
import { MyContext } from "@/context/myContext";

export default function Home() {
  const { value, setValue } = useContext(MyContext)

  const handleSubmit = (e) => {
    e.preventDefault();
    setValue("new val")
  };

  return (
    <>
      {/* 修复未闭合的button标签 */}
      <button onClick={handleSubmit}>
        {value}
      </button>
    </>
  );
}

为什么这样改能解决问题 #

1. 调整Provider位置后，它处于<body>内部，Home组件在Provider的上下文范围内，能正确获取到RootLayout中维护的状态，点击按钮时状态更新也会同步触发组件重新渲染。
2. 闭合button标签后，DOM结构恢复正常，避免了渲染异常导致的状态显示问题。

内容的提问来源于stack exchange，提问作者Miles Acq