React-Native ListView:无法读取undefined的属性

时间:2016-10-21 17:44:42

标签: android reactjs react-native

我使用SQLite作为设备的数据库。我想要基本实现的是:

1-让用户能够为他最喜欢的"数据"

加注星标

2-数据保存在数据库中后,在另一个页面中检索它并将它们插入到listView中,供用户随时查看。

但无论我尝试多少,我总会得到同样的错误。

无法读取未定义的属性。

代码:

import React, { Component } from 'react'
import {
  View,
  Text,
  ListView
} from 'react-native'
var SQLite = require('react-native-sqlite-storage')
var db = SQLite.openDatabase({ name: "RHPC.db", location: "default"})
var obj;

class Schedules extends Component {
  constructor(props) {
    super(props)

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

    this.state = {
      datasource: []
    }

    db.transaction((tx) => {
      tx.executeSql("SELECT * FROM schedules", [], (tx, res) => {
        let len = res.rows.length;
        if(len > 0) {
          for(let i = 0; i < len; i++) {
            var obj = [{id: res.rows.item(i)["id"], title: res.rows.item(i)["title"]}]
          }
          this.setState({
            datasource: obj
          })
        } else {
          console.log("empty")
        }
      })
    }, (err) => {
      console.log("error: " + JSON.stringify(err))
    })
  }

  _renderRow(rowData) {
    return(
      <View>
        <Text key={rowData.id}>
          {rowData.title}
        </Text>
      </View>
    )
  }

  render() {
    console.log(this.state.datasource);
    return(
      <View style={{marginTop: 150}}>
        <ListView
          dataSource={this.state.datasource}
          renderRow={this._renderRow.bind(this)}
        />
      </View>
    );
  }
}


const styles = {

}

export default Schedules;

当我尝试console.log时,dataSource状态:

0: Object
id: 2
title: "Session 1: Transition from Humanitarian Assistance to Rebuilding Health & Health Systems."

所以换句话说它看起来像是在工作但不是100%?因为我在该表中有两行,并且它只检索最后一行。这是未定义问题的原因吗?

1 个答案:

答案 0 :(得分:4)

你以错误的方式使用ListView,你在构造函数(ds)中创建新的dataSource而不是在任何地方分配它,在文档中结帐示例:https://facebook.github.io/react-native/docs/listview.html

应该是:

constructor(props) {
    super(props)

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

在setState中做这样的事情:

this.setState({
    datasource: this.state.dataSource.cloneWithRows(obj)
})

编辑:

在您的for循环中,您应该:

var obj = [];
for(let i = 0; i < len; i++) {
    obj.push({id: res.rows.item(i)["id"], title: res.rows.item(i)["title"]});
}