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

Question

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

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

enter image description here

应该是这样的

Answer 1

您好像忘记从 displayMessages 方法返回节点元素。

这可能会对您有所帮助：

 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 获取数据时，您会进行许多不必要的重新渲染