Javascript 反应本机：获取api调用返回不正确的响应

我使用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;

“严格使用”；
从“React”导入React，{Component}；
从“react native”导入{样式表、视图、文本、ListView、ScrollView}；
var ds=新的ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
类BusList扩展了组件{
构造函数（）{
超级（）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows（['row1'，'row2']），
};
}
componentDidMount（）{
这是loadJSONData（）；
}
loadJSONData（）{
fetch（'my_api！'）
。然后（（响应）=>{
返回response.json（）
})
.然后（（responseJSON）=>{
返回this.setState（{dataSource:this.state.dataSource.cloneWithRows（responseJSON）}）；
})
.catch（（错误）=>{
控制台。警告（错误）；
});
}
renderRow（行数据）{
返回(
{rowData.data}
);
}
render（）{
返回(
{rowData}}
/>
);
}
}
module.exports=总线列表；

然而，当我尝试记录它时，我得到以下结果

---

请帮帮我

我认为，不使用任何包装器而将其转换为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);
      });

---

干杯：）

我认为不使用任何包装器而将其转换为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);
      });

---

干杯：）

非常感谢，这很有效，但这里的问题是如何处理json对象！好的，请简要描述一下如何处理高度嵌套的json对象，或者我可以帮助我更恰当地实现rowHasChanged函数的任何链接，谢谢！无论何时数据源发生更改，它都将重新呈现，并且listView的renderRow api将启动以更新renderRow（）中的listView。您将获取一个参数renderRow（rowData），然后可以使用“.”运算符简化json数据，例如，如果您有一些键名详细信息，并且在该详细信息键中有更多键，即“id”、“address”等，则可以按rowData.detail.address获取每行的“address”。）不变冲突：对象作为React子对象无效（找到：具有键{map}的对象）。如果要呈现子对象集合，请改用数组，或使用React附加组件中的createFragment（object）包装对象。检查

Text

的渲染方法。这是我得到的日志！非常感谢，这是可行的，但这里的问题是如何处理json对象！好的，请简要描述一下如何处理高度嵌套的json对象，或者我可以帮助我更恰当地实现rowHasChanged函数的任何链接，谢谢！无论何时数据源发生更改，它都将重新呈现，并且listView的renderRow api将启动以更新renderRow（）中的listView。您将获取一个参数renderRow（rowData），然后可以使用“.”运算符简化json数据，例如，如果您有一些键名详细信息，并且在该详细信息键中有更多键，即“id”、“address”等，则可以按rowData.detail.address获取每行的“address”。）不变冲突：对象作为React子对象无效（找到：具有键{map}的对象）。如果要呈现子对象集合，请改用数组，或使用React附加组件中的createFragment（object）包装对象。检查

Text

的渲染方法。这是我得到的日志！