React导入Context取值时报元素类型无效错误，该如何解决？

问题原因 #

你混淆了Context实例和你封装的Provider组件的用途：

• AllThemeContext.js 中 createContext() 返回的AllContext才是自带Consumer属性的上下文实例，属于命名导出的内容
• 你默认导出的AllContextProvider只是你封装的用来提供上下文的普通组件，本身不存在Consumer属性，你调用AllContextProvider.Consumer得到的是undefined，所以React会抛出组件类型无效的错误。

修复方案 #

方案1：使用Consumer语法 #

修改logo.js的导入逻辑，同时要保证Consumer的回调函数返回合法的JSX节点：

import React from "react";
// 导入命名导出的上下文实例AllContext，而不是AllContextProvider
import { AllContext } from "../context/AllThemeContext";
import "./Logo.scss";

const Logo = () => {
  return (
    <AllContext.Consumer>
      {(context) => {
        console.log(context);
        // 必须返回JSX，不能只写console.log
        return <div>Logo组件</div>
      }}
    </AllContext.Consumer>
  );
};
export default Logo;

方案2：使用useContext语法（更简洁，符合你初始的需求） #

直接用useContext钩子读取上下文，不需要嵌套Consumer：

import React, { useContext } from "react";
import { AllContext } from "../context/AllThemeContext";
import "./Logo.scss";

const Logo = () => {
  const context = useContext(AllContext);
  console.log(context);
  return <div>Logo组件</div>
};
export default Logo;

额外注意 #

你需要确保Logo组件是AllContextProvider的后代组件，也就是你的上层组件要包裹AllContextProvider才能正常获取上下文值，示例如下：

// 上层组件用法示例
<AllContextProvider submittedInput="测试值">
  <Logo />
</AllContextProvider>

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