2016-07-21 16 views
1

私はデータベースからデータにアクセスしていますが、ListViewに表示したかったのです。 私は次のようにこの操作を行っています。未定義datasource.rowIdentifierは未定義です反応ネイティブのエラー

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

しかし、それはエラーを与えているが は、この問題を解決する助けてください(「dataSource.rowidentifiers」を評価)オブジェクトではありません。

答えて

0

代わりにFlatListを使用してリファクタリングすることはできますか?使用するのがずっと簡単で、ListView以上の改善があります。フラットリストを使用するように変更すると、あなたのエラーが消えてしまうのが私の賭けです。

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

ドキュメント:https://facebook.github.io/react-native/docs/flatlist.html

リストビューからFlatListへの移行の記事:https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b

乾杯

関連する問題