NextJS中通过React Context调用setState无法更新状态的问题

1. 检查HeaderProvider的包裹范围 #

• 必须确保Navbar组件被HeaderProvider包裹，如果Navbar在Provider外部，永远拿不到更新后的状态。调整pages/_app.js的结构，让Provider包裹整个应用的核心组件：

// pages/_app.js
import { HeaderProvider } from '../context/header';
import Navbar from '../components/Navbar';

export default function MyApp({ Component, pageProps }) {
  return (
    <HeaderProvider>
      <Navbar />
      <Component {...pageProps} />
    </HeaderProvider>
  );
}

2. 确认HeaderContext的正确实现 #

• 确保Context的Provider内部维护状态，并将状态和setter正确传入value：

// context/header.js
import { createContext, useContext, useState } from 'react';

const HeaderContext = createContext();

export function HeaderProvider({ children }) {
  const [header, setHeader] = useState(null);

  return (
    <HeaderContext.Provider value={{ header, setHeader }}>
      {children}
    </HeaderContext.Provider>
  );
}

// 封装自定义hook，简化组件调用
export function useHeader() {
  return useContext(HeaderContext);
}

3. 修正Header组件的useEffect逻辑 #

• 调用setHeader后立即打印header显示null是正常的——React的setState是异步操作，不要以此判断状态是否更新。重点是给useEffect添加正确的依赖，确保数据就绪后再更新Context状态：

// components/Header.js
import { useEffect } from 'react';
import { useHeader } from '../context/header';

export default function Header({ siteData }) {
  const { setHeader } = useHeader();

  useEffect(() => {
    // 确保DatoCMS返回的数据存在时再更新状态
    if (siteData?.brand && siteData?.menu) {
      const headerData = {
        brand: siteData.brand,
        menu: siteData.menu
      };
      setHeader(headerData);
    }
  }, [siteData, setHeader]); // 依赖siteData和setHeader，确保数据变化时触发更新

  return <div>Header Content</div>;
}

4. 确保Navbar正确使用Context #

• 在Navbar中通过自定义hookuseHeader获取状态，并处理初始null的情况：

// components/Navbar.js
import { useHeader } from '../context/header';

export default function Navbar() {
  const { header } = useHeader();

  // 初始状态下显示加载提示
  if (!header) {
    return <div>Loading navigation...</div>;
  }

  return (
    <nav>
      <h1>{header.brand}</h1>
      <ul>
        {header.menu.map(menuItem => (
          <li key={menuItem.id}>{menuItem.title}</li>
        ))}
      </ul>
    </nav>
  );
}

关键注意点 #

• 不要在调用setHeader后立即打印状态，异步更新的状态会在组件下一次渲染时生效；
• 所有需要访问Context状态的组件，必须放在HeaderProvider的子节点范围内；
• 自定义hookuseHeader可以避免重复调用useContext(HeaderContext)，减少代码冗余。

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