未捕获的错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象

Posted 2023-02-21

【中文标题】未捕获的错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象

【英文标题】：Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

【发布时间】：2018-10-02 19:10:55

【问题描述】：

Reactjs 上下文提供程序错误

我收到以下错误

invariant.js:42 未捕获的错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

这是我的app.js

import React from 'react';
import ReactDOM from 'react-dom';
import  UserProvider  from "./lib/user.js"

const App = () => <UserProvider></UserProvider>

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

这里是./lib/user.js：

import React from 'react'

export const UserContext = React.createContext(
  user: null,
  logIn: ((token, user) => ),
  logOut: (() => )
)

export class UserProvider extends React.Component 
  constructor(props) 
    super(props)

    this.logIn = (token, user) => 
      setToken(token)
      this.setState(state => (user: user))
    

    this.logOut = (client) => 
      clearToken()
      this.setState(state => (user: null))
      client.resetStore()
      client.cache.reset()
    

    this.state = 
      user: null,
      logIn: this.logIn,
      logOut: this.logOut
    
  

  render() 
    console.log(<div></div>)
    console.log(<UserContext.Provider/>)
    return (
      <UserContext.Provider value=this.state>
        <p>hi</p>
      </UserContext.Provider>
    )
  

这是在 React 16.3.2 上的。在很多情况下，错误是由于默认导出与命名导出，这似乎不是：

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object Uncaught Error: Element type is invalid: expected a string (for built-in components) Element type is invalid: expected a string (for built-in components) or a class/function

【问题讨论】：

在这里可以正常工作：codesandbox.io/s/jn7no02225 您可以编辑（可能是依赖项吗？）以便重现您的错误？

【参考方案1】：

您可能正在使用 react@16.3 和尚不支持上下文的早期 react-dom 版本（例如 16.2）。

【讨论】：

谢谢@DanAbramov！我使用的是react-dom 16.2 并没有升级它。