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

Posted 2023-03-08

【中文标题】React Uncaught TypeError：this.state.messages.map 不是函数

【英文标题】：React Uncaught TypeError: this.state.messages.map is not a function

【发布时间】：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"
        
    

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

【参考方案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 (...)

【讨论】：

完美！谢谢你:)