我正在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创建） 在Route中（在src / index.js：28处） 在div中（在src / index.js：25） 在路由器中（由BrowserRouter创建） 在BrowserRouter（位于src / index.js：24）控制台中。 @ index.js：1375 warningWithoutStack @ 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 renderRoot @ react-dom.development.js：20400 performWorkOnRoot @ react-dom.development.js：21357 performWork @ react-dom.development.js：21267 performSyncWork @ react-dom.development.js：21241互动更新$ 1 @ react-dom.development.js：21526互动更新@ react-dom.development.js：2268 dispatchInteractiveEvent @ react-dom.development.js：5085 react-dom.development.js：57未捕获 不变违规：元素类型无效：预期为字符串（用于 内置组件）或类/函数（用于复合组件） 但得到：对象。您可能忘记了从 定义的文件，或者您可能混淆了默认文件并命名为 进口。
答案 0 :(得分：0)
在评论部分与@Johann讨论之后，我只是在写这个答案。因此，如果其他人遇到相同类型的错误
好的，我不确定，但是您可以尝试使用带有自闭标签的组件，例如<ChatViewComponent />