React Uncaught TypeError：this.state.messages.map 不是函数答案

【问题标题】：React Uncaught TypeError: this.state.messages.map is not a functionReact Uncaught TypeError：this.state.messages.map 不是函数
【发布时间】：2017-03-10 16:51:00
【问题描述】：

我正在开发一个 React 应用程序，但我遇到了这个映射函数的问题：

render() {
    const messages = this.state.messages.map((message) => {
        return (
            <li key={message[".key"]}>{message.text}</li>
        )
    })
    return (...)
}

我收到以下错误：

未捕获的类型错误：this.state.messages.map 不是函数

我认为这与密钥有关。我的消息状态是使用带有Firebase 的componentDidMount 函数填充的：

componentDidMount() {
    firebase.database().ref("messages/").on("value", (snapshot) => {
        const messages = snapshot.val()
        if(messages != null) {
            this.setState({
                messages: messages
            })
        }
    })
}

并使用此功能添加消息：

submitMessage(e) {
    const nextMessage = firebase.database().ref("messages/").push({
        text: this.state.message
    })
}

这意味着带有一条消息的 Firebase 数据库如下所示：

{
    "messages" : {
        "-KV6trWbEW73p8oS49Qk" : {
            "text" : "test"
        }
    }
}

我怀疑我错误地识别了密钥。任何解决此问题的帮助将不胜感激！

【问题讨论】：

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

问题是来自数据库的响应是一个带有键的对象，而map() 需要在一个数组上调用。循环对象的最简单方法是使用Object.keys()，然后使用括号表示法来访问值。

render() {
    const messages = Object.keys(this.state.messages).map((key) => {
        return (
            <li key={key}>{this.state.messages[key].text}</li>
        )
    })
    return (...)
}

【讨论】：

完美！谢谢你:)