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

Question

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:

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:

[
    {
        "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.

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?

Answer 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:

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

Answer 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),
                    }
                });