Reactjs React Native-ListView不呈现来自Firebase的数据

我试图使用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>
    )
}

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}
        />
    )
}

构造函数（道具）{
超级（道具）；
此.state={
信息：[]
}
}
组件willmount（）{
app.database（）.ref（'messages/'）。on（'child_added'，函数（快照）{
让data=snapshot.val（）；
for（让我输入数据）{
this.state.messages.push（数据[i]）；
}
this.setState（{messages:this.state.messages}）；
}.约束（这个）；
}
render（）{
返回(
)
}

消息列表组件：

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

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}
        />
    )
}

构造函数（道具）{
超级（道具）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows（props.messages）
}
}
renderRows=（数据）=>{
返回(
{data.text}
)
}
render（）{
返回(
this.renderRows（数据）}
enableEmptySections={true}
/>
)
}

---

当我将一个对象数组硬编码到

数据源中时，它可以工作，但不能与主组件的数组传递一起工作。
更改
消息列表
组件的构造函数，如：

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

然后添加此实用程序功能：

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

然后，这些行应该会起作用：

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

抱歉，没有时间测试它，但我希望您能理解
 太棒了！！！这很有效。你，先生，你是我的救世主！非常感谢：）