React 使用 Hooks 调用 Context 时报错 Object is not iterable

• 传参对象错误：useContext Hook 的入参必须是通过 createContext 创建的Context实例，当前Test组件中传入的是LessonThemes组件本身，既不是合法的Context实例，值也为非可迭代的组件对象，直接触发不可迭代的报错。
• 层级顺序颠倒：Test组件在顶层调用useContext读取值时，对应的Provider（即LessonThemes组件）还未被渲染为顶层包裹节点，消费者处于Provider的外层，哪怕传入正确的Context对象，也只能拿到createContext初始化时的默认值（本例中未设置默认值，为undefined，对其解构同样会触发不可迭代报错）。
• 子组件渲染缺失：原LessonThemes组件的Provider节点内，仅渲染了主题选择的单选按钮，没有渲染通过props.children传入的嵌套内容，哪怕层级调整正确，传入的子内容也无法被Provider包裹获取值。
• 依赖导入缺失：Test组件代码中没有导入useContext Hook，也没有导入从LessonThemes导出的CounterContext实例，存在依赖缺失问题。

1. 补全Test组件的依赖导入：引入React的useContext Hook，同时导入从LessonThemes导出的CounterContext实例，替换掉原来错误传入的LessonThemes组件。
2. 调整LessonThemes组件的Provider结构：在Provider节点内补充{props.children}的渲染逻辑，确保传入的嵌套内容能被Provider包裹。
3. 调整组件渲染层级：将作为Provider载体的LessonThemes组件移到Test组件的最外层，把所有需要读取Context值的DOM内容作为子节点嵌套在LessonThemes内部，不再在DOM内部重复渲染LessonThemes。

LessonThemes.jsx 调整部分 #

// 删掉无效的ThemeContext导入（未在逻辑中使用）
return (
  <CounterContext.Provider value={[color, setColor]}>
    {/* 新增：渲染传入的子节点 */}
    {props.children}
    {themes.map((theme, index) => {
      return (
        <label key={index}>
          <input
            onChange={() => SideBarPageContent(theme.color)}
            type="radio"
            name="background"
          />{theme.name}</label>
      );
    })}
  </CounterContext.Provider>
);

Test.jsx 完整修复代码 #

import { useContext } from 'react';
// 导入LessonThemes组件和导出的Context实例
import LessonThemes, { CounterContext } from './LessonThemes';

export default function Test(props) {
  // 传入正确的Context实例获取值
  const [color] = useContext(CounterContext);

  return (
    // 将Provider节点移到最外层，包裹所有消费Context的内容
    <LessonThemes>
      <div>
        <div className="sidebar-brand-container">
          {/* 移除原来嵌套在这里的LessonThemes重复渲染逻辑 */}
        </div>
        <div>
          <span style={{ background: color }} href="#">Theme</span>
        </div>
      </div>
    </LessonThemes>
  );
}

修复后重新运行代码，即可正常通过useContext获取到对应的color值，不会再出现对象不可迭代的报错。

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