React fetch Daten im Server vor dem Rendern

Question

Ich bin neu zu reactjs, ich möchte Daten im Server abrufen, so dass es Seite mit Daten an den Client senden wird.

Es ist OK, wenn die Funktion getDefaultProps Dummy-Daten wie folgt zurückgibt {data: {books: [{..}, {..}]}}.

Allerdings nicht mit Code unten arbeiten. Der Code ausführen in dieser Reihenfolge mit der Fehlermeldung "Can not Eigenschaft 'Bücher' undefinierter lesen"

1. getDefaultProps
2. Rückkehr
3. holen
4. {Daten: {Bücher: [{..}, { ..}]}}

Allerdings erwarte ich, dass der Code sollte in dieser Reihenfolge laufen

1. getDefaultProps
2. holen
3. {Daten: {Bücher: [{..}, {..}]}}
4. Rückkehr

Jede Idee?

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

In Reaktion, props werden für Komponentenparameter verwendet wird, nicht für die Datenverarbeitung. Dafür gibt es ein separates Konstrukt namens state. Immer, wenn Sie state aktualisieren, rendert sich die Komponente grundsätzlich nach den neuen Werten.

var BookList = React.createClass({ 
    // Fetches the book list from the server 
    getBookList: function() { 
    superagent.get('http://localhost:3100/api/books') 
     .accept('json') 
     .end(function(err, res) { 
     if (err) throw err; 

     this.setBookListState(res); 
     }); 
    }, 
    // Custom function we'll use to update the component state 
    setBookListState: function(books) { 
    this.setState({ 
     books: books.data 
    }); 
    }, 
    // React exposes this function to allow you to set the default state 
    // of your component 
    getInitialState: function() { 
    return { 
     books: [] 
    }; 
    }, 
    // React exposes this function, which you can think of as the 
    // constructor of your component. Call for your data here. 
    componentDidMount: function() { 
    this.getBookList(); 
    }, 
    render: function() { 
    var books = this.state.books.map(function(book) { 
     return (
     <li key={book.key}>{book.name}</li> 
    ); 
    }); 

    return (
     <div> 
     <ul> 
      {books} 
     </ul> 
     </div> 
    ); 
    } 
}); 

Answer 2

Was Sie suchen, ist componentWillMount.

Vom documentation:

einmal aufgerufen, sowohl auf dem Client und dem Server, unmittelbar vor dem Anfangs Rendering auftritt. Wenn Sie innerhalb dieser Methode setState aufrufen, wird render() den aktualisierten Status anzeigen und nur einmal ausgeführt werden trotz der Statusänderung.

So würden Sie so etwas tun:

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

Auf diese Weise render() wird nur einmal aufgerufen werden, und Sie werden die Daten die Sie suchen haben in der Anfangs machen.

Answer 3

Reagiert auf eine ähnliche Frage mit einer potenziell einfache Lösung für dieses, wenn jemand noch nach einer Antwort ist, der Haken ist es die Verwendung von redux-Sagas beinhaltet:

https://stackoverflow.com/a/38701184/978306

Oder einfach überspringen direkt zum der Artikel, den ich über das Thema geschrieben:

https://medium.com/@navgarcha7891/react-server-side-rendering-with-simple-redux-store-hydration-9f77ab66900a

Answer 4

Als Ergänzung der Antwort von Michael Parker, können Sie getData eine Rückruffunktion zu aktivieren akzeptieren die setState Aktualisierung der Daten:

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

Answer 5

Die beste Antwort, die ich verwende, um Daten von Server zu empfangen und anzeigen es

constructor(props){ 
      super(props); 
      this.state = { 
       items2 : [{}], 
       isLoading: true 
      } 

     } 

componentWillMount(){ 
axios({ 
      method: 'get', 
      responseType: 'json', 
      url: '....', 

     }) 
      .then(response => { 
       self.setState({ 
        items2: response , 
        isLoading: false 
       }); 
       console.log("Asmaa Almadhoun *** : " + self.state.items2); 
      }) 
      .catch(error => { 
       console.log("Error *** : " + error); 
      }); 
    })} 



    render() { 
     return(
     { this.state.isLoading && 
        <i className="fa fa-spinner fa-spin"></i> 

       } 
       { !this.state.isLoading && 
      //external component passing Server data to its classes 
        <TestDynamic items={this.state.items2}/> 
       } 
     ) }