javascript - ReactNative listview 初始状态

Question

我已经开始开发一个 react native 应用程序，但我的 ListView 的初始化出现问题。

我正在使用react-native-db-models插件来存储和检索我的数据

问题是我想在react listview的getInitialState函数中获取数据，并且需要调用回调函数..

这是我的类用于从数据库检索数据的代码:

'use strict';

var React = require('react-native');

var DB = require('./Database');

var DBEvents = require('react-native-db-models').DBEvents;

class BarcodeDAO {
  get_all_barcodes(success) {
    DB.barcodes.get_all(success);
  }
}

module.exports = BarcodeDAO;

这是我的 ListView 代码:

'use strict';

var React = require('react-native');

var {
  AppRegistry,
  Text,
  ListView,
  View,
} = React;

var BarcodeDAO = require('./BarcodeDAO');


var BarcodeList = React.createClass({
  statics: {
    title: '<ListView> - Simple',
    description: 'Performant, scrollable list of data.'
  },

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

    var barcodeDAO = new BarcodeDAO();

    barcodeDAO.get_all_barcodes(function(result) {
       var data = [];
       for(var i = 1; i <= result.totalrows; i++) {
         console.log(result.rows[i].barcode.value);
         data[i-1] = result.rows[i].barcode.value;
       }
       //THIS IS WHERE I DON'T KNOW HOW TO PASS THE VALUE THE THE return of the getInitialState function..
       //self.state.dataSource.cloneWithRows(data);
       //self.getDataSource(self,data);
    });

    return {
      dataSource: ds.cloneWithRows({??????})
    };
  },

  },

  getDataSource: function(self, barcodes: Array<any>): ListView.DataSource {
    console.log("update");
    return self.state.dataSource.cloneWithRows(barcodes);
  },

  render: function() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  },
});

module.exports = BarcodeList;

我是react-和javascript的新手，所以也许这是显而易见的，但我不知道如何制作它..

提前致谢

Answer 1

因为您需要异步获取数据，所以您应该像这样设置初始数据:

getInitialState() {
  dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
}

在 componentDidMount 中，您应该运行获取数据的函数，一旦获得数据，您应该执行类似的操作

this.setState({dataSource: state.dataSource.cloneWithRows(arrayOfBarcodes)})

您的列表将自动使用正确的数据重新呈现。

您可以(并且可能应该)在获取数据时显示旋转器。因此，只需在初始状态中添加类似 loaded: false 的内容，然后当您从数据库获取数据时，将 returned 设置为 true :

this.setState({
  dataSource: state.dataSource.cloneWithRows(arrayOfBarcodes),
  loaded: true
})

然后在你的渲染方法中执行类似的操作

render() {
  if (this.state.loaded) {
     this.renderTheListView()
  }
  else {
     this.renderLoadingIndicator()
  }
}