React Native：フェッチapi呼び出しが不適切な応答を返す

Question

fetchを使用してサーバーにapi呼び出しを行い、応答jsonファイルが応答の未定義の型を返しています。レスポンスをログに記録して画面に表示したい

それのための私のソースコード：しかし

'use strict'; 

import React, {Component} from 'react'; 
import {StyleSheet, View, Text, ListView, ScrollView} from 'react-native'; 

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

class BusList extends Component { 

    constructor() { 
     super(); 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.state = { 
      dataSource: ds.cloneWithRows(['row 1', 'row 2']), 
     }; 
    } 

    componentDidMount() { 
     this.loadJSONData(); 
    } 

    loadJSONData() { 
     fetch('my_api!') 
     .then((response) => { 
     return response.json() 
     }) 
     .then((responseJSON) => { 
      return this.setState({dataSource: this.state.dataSource.cloneWithRows(responseJSON)}); 
     }) 
     .catch((error) => { 
     console.warn(error); 
     }); 
} 

renderRow(rowData) { 
    return(
     <View> 
      <Text>{rowData.data}</Text> 
     </View> 
    ); 
} 

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

module.exports = BusList; 

、私はそれをログに記録しようとすると、私は次のようlog

を取得し、私を助けてください！

Answer 1

ラッパーを使わずにjsonオブジェクトにするのではなく、かなり複雑になると思います。あなたがこれを行うことができます：

//create state 
constructor() { 
     super(); 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.state = { 
      dataSource: ds.cloneWithRows([]), 
      getData:[] 
     }; 
    } 

loadJSONData() { 
     fetch('my_api!', { 
      method: 'get', 
      dataType: 'json', 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json' 
      } 
    }) 
     .then((response) => { 
     this.setState({getData:response}) 
//putting response inside listview directly or you can put this.state.getData 
     this.setState({dataSource:ds.cloneWithRows(response)}) 
     }) 
     .catch((error) => { 
     console.warn(error); 
     }); 

乾杯:)