Next.js中如何在多页面跳转时保持侧边栏状态一致？

修正现有代码的基础错误 #

你当前_app.js中的useState没有正确解构，useState返回值为[状态值, 状态修改函数]，你当前拿到的open实际是一个数组而非布尔值，根本无法正常控制侧边栏状态。同时侧边栏请求代码有两个明显问题：一是直接给useEffect传异步函数不符合React规范，二是请求结果处理的abc.json()属于笔误，正确写法应为请求返回值调用json()方法。

最终实现步骤 #

因为Next.js的_app.js是全局根组件，所有页面跳转都不会销毁该组件，只要把侧边栏相关状态和数据放在根组件层面管理，就能实现跨页面状态一致。

1. 调整_app.js全局状态和上下文声明 #

import { useState, useEffect, createContext } from 'react'
// 先创建全局上下文，方便深层组件读取/修改状态
export const SidebarContext = createContext()
export const GlobalNavDataContext = createContext()

function MyApp({ Component, pageProps }) {
  // 正确解构侧边栏展开状态
  const [open, setOpen] = useState(false);
  // 全局存储侧边栏导航数据
  const [navData, setNavData] = useState({});
  const [headerVisibility, setHeaderVisibility] = useState("");

  // 把侧边栏数据请求移到全局，仅初始化时请求一次
  useEffect(() => {
    const fetchNavData = async () => {
      const rawData = await fetch("http://localhost:8000/data");
      const jsonData = await rawData.json();
      setNavData(jsonData);
    }
    fetchNavData()
  }, [])

  return (
    <>
      <HeaderContext.Provider value={[headerVisibility, setHeaderVisibility]}>
        <SidebarContext.Provider value={[open, setOpen]}>
          <GlobalNavDataContext.Provider value={navData}>
            <NavigationBar open={open} />
            <Content open={open}>
              <Component {...pageProps} />
            </Content>
          </GlobalNavDataContext.Provider>
        </SidebarContext.Provider>
      </HeaderContext.Provider>
    </>
  );
}

export default MyApp;

2. 调整侧边栏组件逻辑 #

侧边栏不需要再单独发请求，直接从全局上下文取数据和状态即可：

import { useContext } from 'react'
import { SidebarContext, GlobalNavDataContext } from './_app'

function NavigationBar({ open }) {
  // 取侧边栏状态修改方法，可直接在组件内控制展开收起
  const [_, setOpen] = useContext(SidebarContext)
  // 取全局导航数据直接渲染
  const navData = useContext(GlobalNavDataContext)

  // 剩余渲染逻辑直接使用open状态和navData数据即可
  return <aside>{/* 侧边栏内容渲染 */}</aside>
}

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