React使用Context触发Element type is invalid错误如何处理？

• 核心逻辑错误：你混淆了createContext创建的上下文对象与useContext钩子返回值的作用：
  1. 你导出的UserContext是调用createContext生成的原生上下文对象，只有这个对象本身才附带Provider组件属性
  2. useContext(UserContext)的返回值是当前上下文的注入值，你初始化Context时传入的默认值是空数组，所以你声明的Context变量本质是数组，不存在Provider属性，渲染时拿到undefined就触发了组件类型无效的报错
• 次要隐患：你给useState初始化的是空对象，给Context设置的默认值是空数组，二者类型不统一，后续子组件读取时容易触发额外类型错误

1. 移除App组件内冗余的const Context:any = useContext( UserContext )代码：useContext是给Provider包裹的子组件用来读取上下文值的API，定义Provider的父组件不需要调用该钩子
2. 直接使用你定义导出的UserContext渲染Provider组件即可，修复后的App代码参考：

import { useState } from 'react'
// 请替换为你实际存放Context定义文件的相对路径
import { UserContext } from './userContext'

export default function App() {
  const [user, setUser] = useState({})

  return (<>
    <UserContext.Provider value={[user, setUser]}> 
      <Nav />
      <Footer />
    </UserContext.Provider>
  </>);  
}

3. 若需要在Nav、Footer等子组件内读取/修改用户信息，再在子组件内调用useContext即可，示例代码：

import { useContext } from 'react'
import { UserContext } from './userContext'

function Nav() {
  // 拿到Provider注入的用户状态和修改方法
  const [user, setUser] = useContext(UserContext)
  // 此处写业务逻辑
  return <div>导航栏</div>
}

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