Javascript React聊天应用程序“；无法读取属性'；键'；是否为空；？

我正在构建一个基于React的聊天应用程序。起初，这个应用运行得非常好，当我设计它的样式时，我的Messagelist.js组件出现了一个错误。我一直在做研究，但找不到任何关于如何修复这个bug的答案。希望有人能帮助我

我已经更新了React并运行了npm审核，以查看是否下载了任何损坏的内容。还更新了图书馆。也检查了我的代码是否有语法错误，但找不到任何语法错误

我也在以前的分支上仔细检查了我的工作，现在也发现了这个错误

下面是my MessageList.js组件的代码

import React, { Component } from 'react';
import Moment from 'react-moment';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {Button} from 'react-bootstrap';


class Messages extends Component {
    constructor (props) {
        super(props)
        this.state = {
            allMessages: [],
            displayedMessages: [],
            newMessageText: ''
        }
        this.messagesRef = this.props.firebase.database().ref('messages')
    }

componentDidMount() {
        this.messagesRef.on('child_added', snapshot  => {
        const message = snapshot.val();
        message.key = snapshot.key;
        this.setState({ allMessages: this.state.allMessages.concat( message ) }, () => {
            this.showMessages( this.props.activeRoom )
        });
    });
    this.messagesRef.on('child_removed', snapshot  => {
        this.setState({ allMessages: this.state.allMessages.filter( message => message.key !== snapshot.key )  }, () => {
            this.showMessages( this.props.activeRoom )
        });
    });
}

componentWillReceiveProps(nextProps) {
        this.showMessages( nextProps.activeRoom );
    }

createMessage(newMessageText) {
    this.messagesRef.push({
            username: this.props.user ? this.props.user.displayName : 'Guest',
            content: newMessageText,
            sentAt: this.props.firebase.database.ServerValue.TIMESTAMP,
            roomId: this.props.activeRoom.key,
        });
    this.setState({ newMessageText: '' });
}


handleChange(e) {
        e.preventDefault();
        this.setState({newMessageText: e.target.value });
    }

removeMessage(activeRoom) {
    this.messagesRef.child(activeRoom.key).remove();
}

showMessages(activeRoom) {
        this.setState({ displayedMessages: this.state.allMessages.filter( message => message.roomId === activeRoom.key ) });
    }

render() {
    return (
        <main id="messages-component">
            <h2 className="room-name">{ this.props.activeRoom ? this.props.activeRoom.name : '' }</h2>
            <ul id="message-list">
                {this.state.displayedMessages.map( message => 
                    <li className="message-info" key={message.key}>
            <div className="username">
                { message.username }
            </div>
            <div className="content">
                { message.content }
            </div>
            <Moment element="span" format="MM/DD/YY hh:mm A" className="sent-at">
                { message.sentAt }
            </Moment>
            <Button type="button" className="btn-remove-msg" onClick={() => this.removeMessage(message)} >
                <FontAwesomeIcon icon='minus-circle'/>
            </Button>
        </li>
    )}
    </ul>
    <form id="create-message" onSubmit={ (e) => { e.preventDefault(); this.createMessage(this.state.newMessageText) } }>
            <input type="text" value={ this.state.newMessageText } onChange={ this.handleChange.bind(this) } name="newMessageText" placeholder="Write your message here..." />
            <input type="submit" value="Send"/>
        </form>
            </main>
        );
    }
}

export default Messages;

import React，{Component}来自'React'；
从“反应力矩”导入力矩；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“react bootstrap”导入{Button}；
类消息扩展组件{
建造师（道具）{
超级（道具）
此.state={
所有消息：[]，
显示的消息：[]，
newMessageText:“”
}
this.messagesRef=this.props.firebase.database（）.ref（'messages'））
}
componentDidMount（）{
this.messagesRef.on（'child_added'，snapshot=>{
const message=snapshot.val（）；
message.key=snapshot.key；
this.setState（{allMessages:this.state.allMessages.concat（message）}，（）=>{
this.showMessages（this.props.activeRoom）
});
});
this.messagesRef.on（'child_removed'，snapshot=>{
this.setState（{allMessages:this.state.allMessages.filter（message=>message.key！==snapshot.key）}，（）=>{
this.showMessages（this.props.activeRoom）
});
});
}
组件将接收道具（下一步）{
this.showMessages（nextrops.activeRoom）；
}
createMessage（newMessageText）{
此.messagesRef.push({
用户名：this.props.user？this.props.user.displayName:'Guest'，
内容：newMessageText，
sentAt:this.props.firebase.database.ServerValue.TIMESTAMP，
roomId:this.props.activeRoom.key，
});
this.setState（{newMessageText:''}）；
}
手变（e）{
e、 预防默认值（）；
this.setState（{newMessageText:e.target.value}）；
}
removeMessage（activeRoom）{
this.messagesRef.child（activeRoom.key）.remove（）；
}
展示信息（活动室）{
this.setState（{displayedMessages:this.state.allMessages.filter（message=>message.roomId==activeRoom.key）}）；
}
render（）{
返回(
{this.props.activeRoom？this.props.activeRoom.name:''}

{this.state.displayedMessages.map（消息=>

{message.username}
{message.content}
{message.sentAt}
this.removeMessage（message）}>

)}

{e.preventDefault（）；this.createMessage（this.state.newMessageText）}>
);
}
}
导出默认消息；

控制台中的错误：

TypeError:无法读取null（匿名函数）src/components/MessageList.js:58 55 |}56 | 57 | showMessages（activeRoom）{>58}this.setState（{displayedMessages:this.state.allMessages.filter（message=>message.roomId==activeRoom.key）}）；59}60}61 | render（）{

---

它在哪一行给出错误。

snapshot.val（）

的返回值是多少？@MaheerAli第58行您能评论一下控制台屏幕上的错误吗您能将

快照

记录到控制台吗？它在哪一行给出错误。

snapshot.val（）的返回值是多少

？@MaheerAli第58行您是否可以对控制台屏幕上出现的错误进行注释？您是否可以将

快照记录到控制台？