当来自服务器的响应延迟时如何延迟组件渲染

Posted 2023-02-16

【中文标题】当来自服务器的响应延迟时如何延迟组件渲染

【英文标题】：How to delay component rendering when response from the server is delayed

【发布时间】：2017-07-31 01:20:18

【问题描述】：

我是一个反应新手。我有一种情况，我正在从服务器获取一些我想在页面中显示的数据。我正在使用 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 函数。我通过单击导航栏中的按钮向服务器发送操作。提前感谢您的帮助

【参考方案1】：

假设您有一个 websocket ws，并正在监听“测试”事件。 在你的 oncomponentDidMount 做

componentDidMount()

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

我也喜欢预定义状态，所以我会在构造函数中添加 this.state=response: