REST-Ressourcen vor dem Rendern in React.js konsumieren

Question

Ich habe React-Komponenten, die externen Webservice verbraucht, um Daten zum Rendern zu erreichen. Ich möchte, dass die Daten vor dem Rendern geladen werden, weil ich möchte, dass sie von Suchmaschinen indiziert werden.

Hier ist meine Komponente:

class AboutPage extends React.Component { 

    async componentWillMount() { 
     let response = await EventWS.doSearch(); 

     this.setState({ 
      eventList : response.data 
     }) 
    } 

    render() { 
     /* ... */ 
    } 
} 

(Ich habe versucht, async/await zu verwenden, weil ich dachte, es könnte helfen, aber nein).

Beim Versuch, die Seite mit Server-Rendering zu laden habe ich die Warnung:

Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op. Please check the code for the FluxContainer(AboutPage) component. 

anzeigt, dass die setState getan wird, nachdem der componentWillMount beendet ist.

In meinem speziellen Fall, was ist der beste Weg, dies zu erreichen? Gibt es eine einfache Möglichkeit, einen Ajax-Aufruf synchron zu machen? Ist es empfehlenswert, dies zu tun?

Vielen Dank.

EDIT: Ich habe eine Bibliothek gefunden, die synchronen Anruf erlauben: https://github.com/ForbesLindesay/sync-request

Aber es heißt, dass es für die Produktion nicht gut geeignet ist. Also bin ich ein bisschen enttäuscht.

Answer 1

Ich habe nicht viel Erfahrung mit Flux, aber es scheint, dass Sie dies in der ComponentDidMount-Methode tun sollten.

Answer 2

können Sie Axios Versprechen basiert get in componentDidMount verwenden, sie umzusetzen, für ein Beispiel können Sie Handling Events In React und unter Beispielcode siehe:

constructor(props) { 
    super(props); 
    this.state = {eventList: []}; 
    this.Axios = axios.create(); 
} 

componentDidMount() { 
     let _this = this; 
     this.Axios.get('/your/rest/url') 
      .then(function (response) { 
       console.log(response); 
       _this.setState({eventList: response.data}); 
      }).catch(function (error) { 
       console.log(error); 
      }); 
} 

Oder wenn Sie bereits Axios verwenden dann stellen Sie sicher, EventWS.doSearch() Rückkehr Promise zu Sie und rufen Sie es in componentDidMount, wie folgt:

constructor(props) { 
    super(props); 
    this.state = {eventList: []}; 
} 

componentDidMount() { 
     let _this = this; 
     EventWS.doSearch().then(function (response) { 
      console.log(response); 
      _this.setState({eventList: response.data}); 
     }).catch(function (error) { 
      console.log(error); 
     }); 
}