使用useContext遇返回值不可迭代错误，求问题排查方案

当使用const [state, setState] = useContext(Context)时触发上述错误，此前相同操作正常，相关代码如下：

State.jsx 文件代码 #

import { createContext, useState } from "react";

export const Context = createContext()

const initialState = {
    tasks: {}
}

const State = ({children}) => {
    const [state, setState] = useState(initialState)

    return (
        <Context.Provider value={[state, setState]}>
            {children}
        </Context.Provider>
    )
}

export default State;

App.jsx 中使用包裹组件 #

import State from './state'
import TaskList from './components/TaskList'

const App = () => {
  return (
    <State>
      <TaskList />
    </State>
  )
}

export default App;

TaskList.jsx 中获取状态 #

import { useContext } from 'react';
import { Context } from '../State';

const TaskList = () => {
  const [state, setState] = useContext(Context)
  
  return (
    <>
      <h1>Task list</h1>
    </>
  )
}

export default TaskList

排查方向 #

• 文件名大小写问题：App.jsx中导入路径是./state，但你的组件文件名为State.jsx。部分打包工具（如Vite）和操作系统（Linux/macOS）对文件名大小写敏感，小写路径会导致组件未正确导入，Context Provider没有包裹子组件，useContext拿到的是默认值undefined，无法进行数组解构。把导入路径改成import State from './State'即可。
• Context默认值缺失：你创建Context时未设置默认值createContext()，如果Provider未生效，useContext返回undefined，自然无法解构数组。可以临时给Context加默认值验证：export const Context = createContext([{}, () => {}])，如果不再报错，说明确实是Provider未生效，回到第一个问题检查导入和包裹逻辑。
• React版本兼容：确认项目中React版本在16.8+（hooks最低支持版本），虽然你之前使用正常，但版本更新可能导致异常，可通过package.json查看版本号。

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