Question

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

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

我收到以下错误：

未捕获的TypeError：this.state.messages.map不是函数

我认为它与密钥有关。我的消息状态使用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()需要在数组上调用。循环访问对象的最简单方法是使用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不是函数

1 个答案: