使用useContext访问CardContext状态变量时返回undefined求助

核心问题 #

你遇到的undefined是因为**Social组件没有被CardProvider包裹**，导致useContext(CardContext)只能拿到createContext()的默认值（未传默认值时就是undefined）。而SearchContext正常工作，是因为对应的SearchProvider正确包裹了Social。

你提到将文件移到context2文件夹后出现问题，大概率是入口文件（如App.js或index.js）里CardProvider的导入路径未更新，或者包裹逻辑被遗漏了。

解决步骤 #

1. 更新CardProvider的导入路径
   若你把CardProvider移到了components/context2/文件夹，需同步修改入口文件里的导入路径：

   // 原错误导入
   // import CardProvider from './context/CardProvider'
   
   // 修改后的正确导入
   import CardProvider from './components/context2/CardProvider'
   

2. 确保Social被CardProvider包裹
   在入口文件中，将Social组件放在CardProvider的子节点范围内：

   function App() {
     return (
       <div className="App">
         <CardProvider>
           <Social />
         </CardProvider>
         {/* 其他组件 */}
       </div>
     );
   }
   

3. 验证Context导入路径正确性
   假设你的文件夹结构如下：

   src/
     components/
       Social.js
       context2/
         CardContext.js
         CardProvider.js
     context/
       SearchContext.js
       SearchProvider.js
   

   那么Social.js里的CardContext导入路径应修改为：

   import { CardContext } from './context2/CardContext';
   

   你当前写的../components/context2/CardContext会跳出components目录，无法找到正确文件。

关于解构报错的补充 #

你提到给createContext()传默认值后能显示但解构报错，是因为默认值不是数组类型。如果要临时支持解构，需将默认值设为数组：

// CardContext.js
export const CardContext = createContext(["", () => {}]);

但这只是临时方案，核心解决方式还是确保Social被CardProvider包裹，这样才能拿到Provider提供的[card, setCard]数组。

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