我正在制作有关创建Slack聊天的视频课程，现在我遇到了一些问题

Question

我正在尝试从数据库（firebase）输出消息。在控制台一切都没问题，但当它没有在组件中显示。看起来我有一些Message组件的问题，但是idk ......

https://github.com/Dronrom/app这里是代码

enter image description here

它应该是那样的

Answer 1

好像你忘了从displayMessages方法返回Node Elements。

这可能对您有所帮助：

 displayMessages = messages => {
    // Check if message list is not empty
    if(messages.length > 0) {
        // Create new constant and collect it with messages
        const messagesList = messages.map(message => (
            <Message 
                key={message.timestamp}
                message={message}
                user={this.state.user}
            />
        ))

        // Return React Nodes collection from method
        return messagesList;
    }
    // Return null when message list is empty
    return null;
}

顺便说一下，从firebase获取数据时你得到了许多不必要的重新渲染