繁体   English   中英

元素类型无效:预期为字符串或类/函数(对于复合组件),但得到了:对象

Element type is invalid: expected a string or a class/function (for composite components) but got: object

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在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中检查代码。 在Router(已创建)的Route(src / index.js:28)中的WithStyles(DashboardComponent)(由Context.Consumer创建)中的DashboardComponent(由WithStyles(DashboardComponent)创建)中在BrowserRouter控制台中(位于src / index.js:24)。 @ index.js:1375 warningWithoutStack @ react.development.js:188警告@ react.development.js:623 createElementWithValidation @ react.development.js:1785 render @ 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 renderRoot @ 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 InteractiveUpdates @ react-dom.development.js:2268 dispatchInteractiveEvent @ react-dom.development.js:5085 react-dom.development.js:57未捕获的不变违规:元素类型无效:预期为字符串(对于内置组件) )或类/函数(用于复合组件),但得到了:对象。 您可能忘记了从定义文件中导出组件,或者可能混淆了默认导入和命名导入。

1 个回复

在评论部分与@Johann讨论之后,我只是在写这个答案。 因此,如果其他人遇到相同类型的错误,则更容易看到他们

好的,我不确定,但是您可以尝试使用带有自闭标签的那些组件,例如<ChatViewComponent />

2 不变违规:元素类型无效:预期为字符串(内置组件)或类/函数(复合组件),但得到:对象

我在这里看到了很多有关import/export ,但是我不明白我的问题是什么,所以我发布了我的问题。 这是我的练习项目的完整配置和代码:(简体) 奇怪的是,如果我不使用&lt;Youtube /&gt;组件,则不会发生任何错误。 这就是为什么我认为我的设置没有问题的 ...

3 react-window 元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件)但得到:对象

我正在使用react-window尝试生成一个列表。 使用他们使用的默认行,他们创建 然后他们使用默认元素像这样创建列表 返回的也是一个对象,与我的一样 我正在尝试做大致相同的事情。 我正在使用列表组件 其中renderUsers(users)输出const renderUsers ...

7 React.createElement:类型无效-预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:对象

我用相同的标题检查了StackOverflow上的许多答案,但似乎找不到我的错误。 我正在关注有关Udemy的教程。 我在AlbumList Component的render方法中调用一个函数。 该函数遍历相册数组,并将每个相册传递给AlbumDetail组件,然后将这些组件作为列表返 ...

8 元素类型无效:预期为字符串或类/函数(对于复合组件)但得到:未定义的反应

我已经搜索了解决方案并找到了很多但它们不适合我的问题。所以我不知道如何解决这个问题。 这是完全错误:- 错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义。 您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。 检查WithAut ...

2021-04-11 10:44:15 1 332   reactjs
10 不变的违规元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件)

在学校里,我们必须在React-Native中构建一个App,该App可以进行通信并从传感器获取数据,但是由于这个错误,我无法继续进行,也不知道出了什么问题。 通过环顾stackoverflow和google,我得出的结论是它必须是错误的导入,但是我不知道它是哪一个。 不变的违反:元 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM