反应原生的datasource.rowIdentifier是未定义的错误

时间:2016-07-21 09:15:18

标签: javascript react-native

我正在从数据库访问数据,我想在ListView中显示它。 我正在按照以下方式执行此操作。

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

const LoadingPage=()=>(
   <View style={{backgroundColor:"blue"}}>
     <Image style={{width:150, height:100,bottom:60}} source={require('./drawable/drawable/asap.png')}/>

  </View>
)
const Row = (props) => (
  <View style={styles.container}>
  <Text style={styles.text}>
      {`${props.paymentType.name} ${props.amount} ${props.date} ${props.description}`}
  </Text>
  </View>
);

async fetchData(){
    var DEMO_TOKEN = await AsyncStorage.getItem(STORAGE_KEY);

    fetch(" http://asaptest-sas71.rhcloud.com/api/approvals", {
         method: 'get',
         dataType: 'json',
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json',
           'Authorization': DEMO_TOKEN
         },
        }).then((response) => 
         {
           return response.json() // << This is the problem
         }).then(function(data) { 
            console.log(data);
            const tempNames = [];    

            for(var i=0;i<data.length;i++){
              tempNames.push(data[i]);
            }
            this.setState({ approvals: tempNames,dataSource: ds.cloneWithRows(this.state.approvals)});
            alert(JSON.stringify(this.state.approvals,null,4))



          }.bind(this)).catch(function(err) {
            //alert("Error is"+err)

           console.log(err);
         })
        .done();

}
componentDidMount(){
    this.fetchData();
   setTimeout(this.setTimePassed()
          , 2000) ;
}
setTimePassed() {
 this.setState({timePassed: true});
}
render(){
  if (!this.state.timePassed){
  return <LoadingPage/>
  }
  else{
    return (

      <ListView
      dataSource={this.state.dataSource}  
     />)
  }
 }

但它给出的错误是undefined不是一个对象(评估&#39; dataSource.rowidentifiers&#39;) 请帮我解决这个问题。

1 个答案:

答案 0 :(得分:0)

请您重构使用FlatList。它使用起来非常简单,并且比ListView有所改进。而我的赌注是,当您更改为使用FlatList时,您的错误将消失。

原因:http://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html

文档:https://facebook.github.io/react-native/docs/flatlist.html

有关从ListView迁移到FlatList的文章:https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b

干杯