React Native的ListView.DataSource循环数据

Question

当我执行Console.log（this.state.dataSource）时，得到的图像如下，我当前得到的是“ Row go here！” x 4，因为API返回4结果。

我试图检索用户数据（如电子邮件），但不会“循环”并进行相应打印。

我不确定该代码的工作方式，注释会有所帮助。请咨询

    var messagesTab = React.createClass({
  componentWillMount: function() {
    fetch('https://randomuser.me/api/?results=4')
      .then(res => res.json())
      .then(res => this.updateDataSource(res));
  },
  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
      })
    };
  },
  updateDataSource: function(data){
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(data)
    })
  },
  renderRow: function (){
    return (
      <View>
        <Text>Row goes here!</Text>
      </View>
    );
  },
  render: function(){
    console.log(this.state.dataSource);
    return (
      <View style={ styleseact.container }>
        <ListView dataSource={ this.state.dataSource } renderRow={ this.renderRow } />
      </View>
    );
  }
});

当我做一个console.log（data）;时，我得到了这个。 在renderRow上

Answer 1

您正在覆盖您的DataSource声明。 拆分声明并更新。

在React.createClass之前声明它：

var ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2
});

从getInitialState删除它：

getInitialState: function() {
  return {
    dataSource: ds.cloneWithRows([])
  };
},

并在更新函数中引用它：

updateDataSource: function(data){
  this.setState({
    dataSource: ds.cloneWithRows(data)
  })
},