NextJS中无法获取Context更新后的值问题求助

你的问题核心出在SortListProvider的两个关键错误上，以下是具体修复方案：

1. getSort函数未调用导致actualSort值异常 #

在SortListProvider的useEffect中，你直接将getSort函数本身传给了setActualSort，而非调用函数获取返回值。这会导致actualSort被设置为函数对象而非预期的字符串，同时getSort在非浏览器环境（如SSR场景）下没有返回值，进一步造成actualSort为undefined。

修复代码（修改sortListContext.tsx）： #

// 完善getSort函数，确保任何场景都有返回值
function getSort(){
    if(typeof window !== 'undefined'){
        const local = localStorage.getItem('sort')
        return local ? 'A' : 'B'
    }
    // 非浏览器环境返回默认值
    return 'B'
}

React.useEffect(()=>{
    // 调用getSort函数，将返回值传给setActualSort
    setActualSort(getSort())
},[])

2. 确认SortListProvider正确包裹目标组件 #

如果修复后仍获取Context的默认值，请检查你的应用路由或父组件是否将Favorites组件包裹在SortListProvider内部。例如：

// 示例：在路由或根组件中引入Provider
import { SortListProvider } from './contexts/sortListContext'
import Favorites from './favorites'

function App() {
  return (
    <SortListProvider>
      {/* 确保Favorites组件在Provider的作用域内 */}
      <Favorites />
    </SortListProvider>
  )
}

额外优化建议 #

• 给actualSort的useState设置初始默认值，避免初始渲染时为undefined：

const [actualSort, setActualSort] = React.useState<string>('B')

• 为SortListProvider的children参数添加类型约束，避免使用any：

export function SortListProvider({children}: { children: React.ReactNode }){
  // ... 原有逻辑代码
}

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