React.jsでレンダリングする前にRESTリソースを消費する

Question

レンダリングのために外部Webサービスを使用するReactコンポーネントがあります。 レンダリングの前にデータをロードしたいのですが、検索エンジンでインデックスを作成したいからです。ここで

は私のコンポーネントです：

class AboutPage extends React.Component { 

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

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

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

（私はそれを助けることができると思ったので、非同期/のawaitを使用しようとしたが、ありません）。 componentWillMountが終了した後にSETSTATEが行われていることを示す

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. 

：サーバー側レンダリングでページをロードしようとすると

私は警告を受けました。

私の具体的なケースでは、これを克服する最良の方法は何ですか？同期的にajaxコールを行う簡単な方法はありますか？そうすることをお勧めしますか？

ありがとうございます。

編集：私は同期呼び出しを行うことができ、ライブラリを発見した ： https://github.com/ForbesLindesay/sync-request

をしかし、それは、それは生産に適していないと述べています。だから私は少しdisapointed。

Answer 1

Fluxについて多くの経験はありませんが、componentDidMountメソッドでこれを行う必要があるようです。

Answer 2

あなたはそれを実装するcomponentDidMountでgetをベースAxios約束、たとえばあなたがHandling Events In Reactとサンプルコードの下を参照することができます使用することができます。

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

それとも、すでにEventWS.doSearch()リターンPromiseに確認して、その後Axiosを使用している場合をあなたはで次のように呼んでください：

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