React Native - ListViewがFirebaseからデータをレンダリングしない

Question

React Native ListViewコンポーネントを使用しようとしていますが、レンダリングされていません。 ListViewはdataBlobをとります。これは配列であり、私が渡しているものです。

私の主なコンポーネントでは、私はcomponentWillMountを使ってFirebaseからデータを取得しています。これは私にメッセージと送信者を含むオブジェクトの配列を与えます。

例：[{text: 'Hello', sender: 'p1'}, {text: 'Hi', sender: 'p2}]

メインコンポーネント：

constructor(props) { 
    super(props); 
    this.state = { 
     messages: [] 
    } 
} 

componentWillMount() { 
    app.database().ref('messages/').on('child_added', function(snapshot) { 
     let data = snapshot.val(); 
     for(let i in data) { 
      this.state.messages.push(data[i]); 
     } 
     this.setState({messages: this.state.messages}); 
    }.bind(this)); 
} 

render() { 
    return (
     <View> 
      <MessagesList messages={this.state.messages}/> 
     </View> 
    ) 
} 

MessagesListコンポーネント：

constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2 }); 
    this.state = { 
     dataSource: ds.cloneWithRows(props.messages) 
    } 
} 
renderRows = (data) => { 
    return (
     <View> 
      <Text>{data.text}</Text> 
     </View> 
    ) 
} 

render() { 
    return(
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={(data) => this.renderRows(data)} 
      enableEmptySections={true} 
     /> 
    ) 
} 

Iハードコードそれはしかしdoesnの作品dataSourceへのオブジェクトの配列tからの配列パスでの作業彼は主なコンポーネントです。

getDataSource(messages: Array<any>): ListView.DataSource { 
    if(!messages) return; 
    return this.state.dataSource.cloneWithRows(messages); 
} 

はまた、この追加：

componentDidMount(){ 
    this.setState({dataSource: this.getDataSource(this.props.messages)}); 
} 

そして、これらの線が何をすべき

constructor(props) { 
    super(props); 
    this.state = { 
     dataSource: new ListView.DataSource({ 
      rowHasChanged: (row1, row2) => row1 !== row2, 
     }) 
    }; 
} 

はその後、このユーティリティの機能を追加しますようにあなたのMessagesListコンポーネントのコンストラクタを変更

Answer 1

トリック：

申し訳ありませんが、テストする時間がありませんでしたが、私はあなたがアイデアを得ることを願っています！