はキャッチされない例外TypeErrorに反応：this.state.messages.mapが機能

Question

ではない私が反応アプリケーションを開発していると私は、このマッピング機能で問題に遭遇しました：

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

私はそれがキーと関係があると思います。私のメッセージは状態が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 
    }) 
} 

これは、1つのメッセージと私の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 (...) 
}