元素类型无效：应为字符串或类/函数（用于复合组件）但得到：对象

Posted 2023-02-21

【中文标题】元素类型无效：应为字符串或类/函数（用于复合组件）但得到：对象

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

【发布时间】：2019-11-25 00:41:46

【问题描述】：

我正在做一些 React.js 教程，对此我还很陌生。我在dashboard.js中有这段代码

import React from 'react';
import NewChatComponent from '../newChat/newChat';
import ChatListComponent from '../chatList/chatList';
import ChatViewComponent from '../chatView/chatView';
import ChatTextBoxComponent from '../chatTextBox/chatTextBox';
import styles from './styles';
import  Button, withStyles  from '@material-ui/core';
const firebase = require("firebase");

class DashboardComponent extends React.Component 

  constructor() 
    super();
    this.state = 
      selectedChat: null,
      newChatFormVisible: false,
      email: null,
      friends: [],
      chats: []
    ;
  

  render() 

    const  classes  = this.props;

    if(this.state.email) 
      return(
        <div className='dashboard-container' id='dashboard-container'>
          <ChatListComponent history=this.props.history 
            userEmail=this.state.email 
            selectChatFn=this.selectChat 
            chats=this.state.chats 
            selectedChatIndex=this.state.selectedChat
            newChatBtnFn=this.newChatBtnClicked>
          </ChatListComponent>
          
            this.state.newChatFormVisible ? null : <ChatViewComponent 
              user=this.state.email 
              chat=this.state.chats[this.state.selectedChat]>
            </ChatViewComponent>
          
           
            this.state.selectedChat !== null && !this.state.newChatFormVisible ? <ChatTextBoxComponent userClickedInputFn=this.messageRead submitMessageFn=this.submitMessage></ChatTextBoxComponent> : null 
          
          
            this.state.newChatFormVisible ? <NewChatComponent goToChatFn=this.goToChat newChatSubmitFn=this.newChatSubmit></NewChatComponent> : null
          
          <Button onClick=this.signOut className=classes.signOutBtn>Sign Out</Button>
        </div>
      );
     else 
      return(<div>LOADING....</div>);
    
  

  signOut = () => firebase.auth().signOut();

  submitMessage = (msg) => 
    const docKey = this.buildDocKey(this.state.chats[this.state.selectedChat]
      .users
      .filter(_usr => _usr !== this.state.email)[0])
    firebase
      .firestore()
      .collection('chats')
      .doc(docKey)
      .update(
        messages: firebase.firestore.FieldValue.arrayUnion(
          sender: this.state.email,
          message: msg,
          timestamp: Date.now()
        ),
        receiverHasRead: false
      );
  

  // Always in alphabetical order:
  // 'user1:user2'
  buildDocKey = (friend) => [this.state.email, friend].sort().join(':');

  newChatBtnClicked = () => this.setState( newChatFormVisible: true, selectedChat: null );

  newChatSubmit = async (chatObj) => 
    const docKey = this.buildDocKey(chatObj.sendTo);
    await 
      firebase
        .firestore()
        .collection('chats')
        .doc(docKey)
        .set(
          messages: [
            message: chatObj.message,
            sender: this.state.email
          ],
          users: [this.state.email, chatObj.sendTo],
          receiverHasRead: false
        )
    this.setState( newChatFormVisible: false );
    this.selectChat(this.state.chats.length - 1);
  

  selectChat = async (chatIndex) => 
    await this.setState( selectedChat: chatIndex, newChatFormVisible: false );
    this.messageRead();
  

  goToChat = async (docKey, msg) => 
    const usersInChat = docKey.split(':');
    const chat = this.state.chats.find(_chat => usersInChat.every(_user => _chat.users.includes(_user)));
    this.setState( newChatFormVisible: false );
    await this.selectChat(this.state.chats.indexOf(chat));
    this.submitMessage(msg);
  

  // Chat index could be different than the one we are currently on in the case
  // that we are calling this function from within a loop such as the chatList.
  // So we will set a default value and can overwrite it when necessary.
  messageRead = () => 
    const chatIndex = this.state.selectedChat;
    const docKey = this.buildDocKey(this.state.chats[chatIndex].users.filter(_usr => _usr !== this.state.email)[0]);
    if(this.clickedMessageWhereNotSender(chatIndex)) 
      firebase
        .firestore()
        .collection('chats')
        .doc(docKey)
        .update( receiverHasRead: true );
     else 
      console.log('Clicked message where the user was the sender');
    
  

  clickedMessageWhereNotSender = (chatIndex) => this.state.chats[chatIndex].messages[this.state.chats[chatIndex].messages.length - 1].sender !== this.state.email;

  componentWillMount = () => 
      firebase.auth().onAuthStateChanged(async _usr => 
        if(!_usr)
          this.props.history.push('/login');
        else 
          await firebase
            .firestore()
            .collection('chats')
            .where('users', 'array-contains', _usr.email)
            .onSnapshot(async res => 
              const chats = res.docs.map(_doc => _doc.data());
              await this.setState(
                email: _usr.email,
                chats: chats,
                friends: []
              );
            )
        
    );
  


export default withStyles(styles)(DashboardComponent);

有问题的代码行是这一行：-

newChatBtnClicked = () => this.setState( newChatFormVisible: true, selectedChat: null );

如果我设置 newChatFormbVisible: false，我不会收到错误，但是将其设置为 true，会失败并出现以下错误：-

index.js:1375 警告：React.createElement：类型无效 -- 期望一个字符串（对于内置组件）或一个类/函数（对于 复合组件）但得到：对象。您可能忘记导出 你的组件来自它定义的文件，或者你可能混合了 设置默认和命名导入。

在 dashboard.js:47 检查您的代码。 在 DashboardComponent 中（由 WithStyles(DashboardComponent) 创建） 在 WithStyles(DashboardComponent) 中（由 Context.Consumer 创建） 在路线中（在 src/index.js:28） 在 div 中（在 src/index.js:25） 在路由器中（由 BrowserRouter 创建） 在 BrowserRouter（位于 src/index.js:24）控制台中。 @index.js:1375 警告WithoutStack @react.development.js:188 警告@ react.development.js:623 createElementWithValidation @ react.development.js:1785 渲染@dashboard.js:44 finishClassComponent @ react-dom.development.js:15319 updateClassComponent @ react-dom.development.js:15274 beginWork @ react-dom.development.js:16262 performUnitOfWork @ react-dom.development.js:20279 workLoop @ react-dom.development.js:20320 渲染根@ react-dom.development.js:20400 performWorkOnRoot @ react-dom.development.js:21357 performWork @ react-dom.development.js:21267 performSyncWork @ react-dom.development.js:21241 interactiveUpdates$1 @ react-dom.development.js:21526 交互更新@ react-dom.development.js:2268 dispatchInteractiveEvent @ react-dom.development.js:5085 react-dom.development.js:57 未捕获 Invariant Violation：元素类型无效：需要一个字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：对象。您可能忘记从 它在其中定义的文件，或者您可能混淆了默认值和命名 进口。

【问题讨论】：

您好，您是如何导出 ChatViewComponent、ChatTextBoxComponent 和 NewChatComponent 的。您应该使用默认值导出它们。你也可以分享这些组件代码吗？

都和这个一样导出，即：- export default withStyles(styles)(nameofcomponent);

好的，我不确定，但您可以尝试使用带有自结束标签的组件，例如 。

自关闭似乎已经成功了！感谢 octobus，我会将其标记为已解决。我认为您必须创建一个答案，以便我可以标记为已解决，对吗？

【参考方案1】：

我们在 cmets 部分与 @Johann 讨论后，我才写下这个答案。因此，如果他们遇到相同类型的错误，其他人更容易看到

好的，我不确定，但您可以尝试使用带有自结束标签的组件，例如<ChatViewComponent />