React使用useContext时报Object is not Iterable错误求助

报错原因 #

你遇到的TypeError: Object is not iterable错误，本质是useContext(MyContext)返回的值不是你预期的数组，无法执行数组解构操作。你给Context设置默认值不生效，是因为Context的默认值仅当组件没有被对应Provider包裹时才会生效，你当前的问题就是没有把App组件套入你写的AppStore Provider容器中。

修复步骤 #

1. 调整入口文件包裹Provider #

   找到项目入口文件（通常是src/index.js），将App组件外层套上你导出的AppStore组件，示例代码如下：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import App from './App';
   import AppStore from './contexts/AppContext';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <React.StrictMode>
       {/* 必须包裹AppStore，内部组件才能拿到Provider传递的数组值 */}
       <AppStore>
         <App />
       </AppStore>
     </React.StrictMode>
   );
   

2. 修正Context默认值（可选优化） #

   你之前设置的默认值结构和实际返回不一致，可调整为匹配初始state的结构，避免极端场景下的结构报错：

   // AppContext.js中修改
   export const MyContext = React.createContext([startState, () => {}]);
   

3. 修复小警告（可选） #

   App.js中第一个nav标签用了原生的class属性，React规范中要写className，替换后可消除控制台的属性警告。

修复完成后重新运行项目，解构操作就可以正常读取Provider传递的[state, setState]数组，报错会消失。

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