Question

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

Answer 1

假设你有一个websocket ws，并且听“test”事件。在你的oncomponentDidMount做

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

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

如何在服务器响应延迟时延迟组件呈现

1 个答案: