如何在服務器響應延遲時延遲組件渲染

我是一名新手，需要做出反應。我有一種情況，在從服務器獲取一些數據，我想要在頁面中顯示。我正在使用websockets進行客戶端和服務器之間的通信。當服務器向第三方API發出請求時，響應會延遲。但是我的組件在響應來臨之前就已經呈現了。我已經看到了在Ajax請求的情況下處理這種情況的答案。但是，如何在網絡套接字的情況下處理它。我想正從服務器的響應後，呈現我的樣品JSX頁面如下如何在服務器響應延遲時延遲組件渲染

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

我如何讓客戶知道，從服務器接收到響應，它的時間來呈現一個組件。如果響應延遲，我可以顯示加載頁面會更好。所以我想使用getInitialState函數。我正在通過導航欄中的按鈕點擊一個動作到服務器。感謝您的幫助提前

來源

2017-07-31 RBN

假設你有一個websocket ws，並聽取「測試」事件。在oncomponentDidMount做

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

也是我喜歡預先定義的狀態，所以我要補充this.state = {響應：{}}在構造函數中

來源

2017-07-31 01:25:52

感謝您的答覆。有效。 – RBN

如何在服務器響應延遲時延遲組件渲染

回答

相關問題