サーバーからの応答が遅れた場合のコンポーネントレンダリングの遅延方法

Question

私は反応する初心者です。私は、あるページに表示したいサーバーからいくつかのデータを取得している状況があります。私は、クライアントとサーバー間の通信にウェブソケットを使用しています。サーバーがサードパーティのAPIにリクエストを行うと、応答が遅れます。しかし、応答が来る前に私のコンポーネントがレンダリングされます。このような状況をAjaxリクエストの場合に処理する方法については、私は答えを見てきました。しかし、どのように私はWebソケットの場合にそれを処理します。私は、クライアントがサーバからの応答が受信されていて、それがコンポーネントをレンダリングする時が来たことを知らせるにはどうすればよい

import React ,{PureComponent} from 'react'; 

    export default class ScorePanel extends PureComponent{ 
     constructor(props){ 
      super(props); 
      var d = new Date(); 
      this.currentDate = d.getFullYear()+"-"+d.getMonth()+ "-"+ d.getDate(); 
      this.week ="1"; 
      this.numQuarters =1; 
     } 
     getInitialState(){ 
      return { 
       resultsObtianed: false 
       } 
     } 
     getScores(){ 
      return this.props.scores ||[]; 
     } 
     render() { 

      return <div className = 'scorePanel'> 
        if (!this.state.response) { 
          return <div>loging response</div> 
        } 
        { 
         // data to render after geting response from server 
        } 
    } 

を次のように私は、サーバーからの応答を取得した後にレンダリングしたい私のサンプルJSXページがあります。応答が遅れた場合、読み込みページを表示できる方が良いでしょう。だから私は同様にgetInitialState関数を利用したいと思います。ナビゲーションバーのボタンをクリックして、サーバーにアクションをディスパッチします。事前に助けてくれてありがとう

Answer 1

あなたはwebsocket wsを持っていて、 "test"イベントを聞いていると仮定します。あなたのoncomponentDidMountで は

componentDidMount() 
 
{ 
 
    ws.on("test",(data)=>{ 
 
    this.setState({response:data}) 
 
    }) 
 
}

はまた、私は状態をあらかじめ定義して好きですので、私はthis.state = {応答：{}}追加したい応答のコンストラクタでは