如何将React-native与后端服务器集成？

I am using django as the backend, and react-native for the app. When the app is opened inside the react-native app, on componentDidMount(), the method will will request through the url to the django server:

我使用django作为后端，并为应用程序做出反应原生。当应用程序在react-native应用程序内部打开时，在componentDidMount（）上，该方法将通过url请求django服务器：

export default class App extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.fromServer()
    }
    fromServer() {
        var headers = new Headers();
        headers.append('Accept', 'application/json');
        let a = fetch('http://xxx.xxx.xx.xx:8080/posts/', headers)
            .then(function(response) {
                console.log('fetched...')
                    if (response.status !== 200) {
                        console.log('There was a problem. Status Code: ' +  response.status);  
                        return;
                    }
                    response.json().then(function(data) {  
                        console.log(data);
                    });  
                }  
            )  
            .catch(function(err) {  
                console.log('Fetch Error :-S', err);  
            });
    }
    render() {
        return (
            <View>
                <ListView dataSource=?????></ListView>
            </View>
        );
   }
}

And the server will respond with an array of json objects. Like so:

服务器将响应一组json对象。像这样：

[
    {
        "id": 7,
        "target": {
            "body": "This is the body",
            "title": "Airbnb raising a reported $850M at a $30B valuation"
        }
    },
    {
        "id": 11,
        "target": {
            "body": "This is the body",
            "title": "Browsing the APISSS"
        }
    }
]

Since I have enabled remote debugging, I can see the json objects in the console.

由于我已启用远程调试，因此我可以在控制台中看到json对象。

I know the basic of creating a ListView. My problem is, when the array of objects are fetched, how can I use that array of objects to render it with the ListView, so that I can display the title and body for each list item. Do I create a separate state in the constructor and add it to the dataSource? How do you integrate react-native app with the backend server?

我知道创建ListView的基础知识。我的问题是，当获取对象数组时，如何使用该对象数组使用ListView呈现它，以便我可以显示每个列表项的标题和正文。我是否在构造函数中创建一个单独的状态并将其添加到dataSource？如何将react-native应用程序与后端服务器集成？

2 个解决方案

#1

You will need to create a datasource in constructor and set it as default state and change that datasource state again once you get new data. And you will also need to set renderRow prop for ListView which returns row component . Your code could look this following:

您需要在构造函数中创建数据源并将其设置为默认状态，并在获得新数据后再次更改该数据源状态。您还需要为ListView设置renderRow prop，它返回行组件。您的代码可能如下所示：

export default class App extends React.Component {
constructor(props) {
    super(props)
    //---> Create DataSource
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
   this.state = {dataSource:ds}
}
componentDidMount() {
    this.fromServer()
}
fromServer() {
    var headers = new Headers();
    headers.append('Accept', 'application/json');
    let a = fetch('http://xxx.xxx.xx.xx:8080/posts/', headers)
        .then((response) => {
            console.log('fetched...')
                if (response.status !== 200) {
                    console.log('There was a problem. Status Code: ' +  response.status);  
                    return;
                }
                response.json().then(function(data) {  
                    //---> Change DATASOURCE STATE HERE
                    this.setState(dataSource:this.state.dataSource.cloneWithRows(data))
                });  
            }  
        )  
        .catch(function(err) {  
            console.log('Fetch Error :-S', err);  
        });
}
render() {
   //--> set correct datasource
    return (
        <View>
            <ListView renderRow={this.renderRow.bind(this)} dataSource={this.state.dataSource}></ListView>
        </View>
    );
 }
 renderRow(rowInformation)
 {
   return <Text>{rowInformation.title}</Text>
 }
}

#2

whenever u receive valid response, you can just do

只要你收到有效的回复，你就可以做到

response.json().then(function(data) {  
                    console.log(data);
                    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
                    this.state={
                       dataSource: ds.cloneWithRows(data),
                    }
                });