React fetch data in server before render

Question

I'm new to reactjs, I want to fetch data in server, so that it will send page with data to client.

It is OK when the function getDefaultProps return dummy data like this {data: {books: [{..}, {..}]}}.

However not work with code below. The code execute in this sequence with error message "Cannot read property 'books' of undefined"

1. getDefaultProps
2. return
3. fetch
4. {data: {books: [{..}, {..}]}}

However, I expect the code should run in this sequence

1. getDefaultProps
2. fetch
3. {data: {books: [{..}, {..}]}}
4. return

Any Idea?

statics: {     fetchData: function(callback) {       var me = this;        superagent.get('http://localhost:3100/api/books')         .accept('json')         .end(function(err, res){           if (err) throw err;            var data = {data: {books: res.body} }            console.log('fetch');                             callback(data);           });     }   getDefaultProps: function() {     console.log('getDefaultProps');     var me = this;     me.data = '';      this.fetchData(function(data){         console.log('callback');         console.log(data);         me.data = data;             });      console.log('return');     return me.data;               },     render: function() {     console.log('render book-list');     return (       <div>         <ul>         {           this.props.data.books.map(function(book) {             return <li key={book.name}>{book.name}</li>           })         }         </ul>       </div>     );   } 

Answer 1

What you're looking for is componentWillMount.

From the documentation:

Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

So you would do something like this:

componentWillMount : function () {     var data = this.getData();     this.setState({data : data}); }, 

This way, render() will only be called once, and you'll have the data you're looking for in the initial render.

Answer 2

A very simple example of this

import React, { Component } from 'react'; import { View, Text } from 'react-native';  export default class App extends React.Component  {      constructor(props) {       super(props);        this.state = {         data : null       };     }      componentWillMount() {         this.renderMyData();     }      renderMyData(){         fetch('https://your url')             .then((response) => response.json())             .then((responseJson) => {               this.setState({ data : responseJson })             })             .catch((error) => {               console.error(error);             });     }      render(){         return(             <View>                 {this.state.data ? <MyComponent data={this.state.data} /> : <MyLoadingComponnents /> }             </View>         );     } }