React Context组件中访问state显示undefined问题求助

核心原因 #

你在CurrentOpeningsCard组件中错误地使用对象解构方式获取Context值，但Provider传递的是数组类型的currentJobs，而非包含currentJobs属性的对象。

看Provider代码：

<currentJobsContext.Provider value={currentJobs}>

这里value直接传入的是初始值为[]的state（数组类型），但组件里写的是：

const { currentJobs } = useContext(currentJobsContext)

这种对象解构会试图从数组中读取currentJobs属性，而数组没有该属性，因此得到undefined。

修复方案 #

有两种可行的修复方式：

方式1：直接接收Context值（推荐，适合当前仅传递单个值的场景） #

修改CurrentOpeningsCard中的代码，去掉对象解构的大括号：

const currentJobs = useContext(currentJobsContext)

方式2：Provider传递对象（适合后续需要扩展多个Context值的场景） #

修改ProviderCurrentOpenings的Provider部分，将value改为包含currentJobs的对象：

<currentJobsContext.Provider value={{ currentJobs }}>

这样组件中的对象解构就能正常读取到currentJobs值。

额外检查点 #

1. 确认组件层级：CurrentOpeningsCard必须是ProviderCurrentOpenings的后代组件，从App.jsx代码来看，CurrentJobOpenings在Provider内部，只要CurrentOpeningsCard是它的子组件就没问题。
2. 验证API返回：在fetchcurrentJobs中添加console.log(response.data)，确认接口返回的是数组格式，避免因接口返回非数组数据导致后续渲染异常。
3. 初始值兜底：当前state初始值为[]，即使接口未完成请求，组件也能拿到空数组，不会出现undefined，因此核心问题仍是解构错误。

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