React Uncaught TypeError: this.state.messages.map is not a function

Question

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

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

我收到以下错误：

Uncaught TypeError: this.state.messages.map is not a function

我觉得跟key有关系。我的消息状态是使用 componentDidMount 函数和 Firebase:

填充的

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"
        }
    }
}

我怀疑我没有正确识别密钥。非常感谢任何解决此问题的帮助！

Answer 1

问题是数据库的响应是一个带有键的对象，而map() needs to be called on an array. The easiest way to loop through an object is to use Object.keys()然后使用括号表示法访问值。

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

React Uncaught TypeError: this.state.messages.map is not a function

React Uncaught TypeError: this.state.messages.map is not a function

firebase

reactjs

firebase-realtime-database