如何等待在 react.js 中渲染视图，直到 $.get() 完成？

Posted 2023-02-22

【中文标题】如何等待在 react.js 中渲染视图，直到 $.get() 完成？

【英文标题】：How to wait to render view in react.js until $.get() is complete?

【发布时间】：2016-01-24 11:45:58

【问题描述】：

您好，我正在用 reactjs 编写一个聊天客户端，并希望使用从 REST 调用中检索到的数据来呈现我的组件。但是，我的组件是在 REST 请求返回数据之前呈现的；当我在子组件中调用 this.props 时，这会导致错误。

var MainChat = React.createClass(
getInitialData: function()
    var c = []
    $.get("http://127.0.0.1:8888/test/sampledata.php?user=123", function(data, status) 
        console.log("Data: "+ data+ "\nStatus: " + status);
        c = data    
    )
,
getInitialState: function() 
    return 
        chatId : "",
        chats : this.getInitialData(),
        //chats: this.props.chats
    ;
,
handleClickOnLeftUser: function(data)
    console.log("handleClickOnLeftUser");
    // console.log("chat id is"); 
    // console.log(data.chatID); 
    this.setState(chatID: data.chatID);
,

render: function() 
    console.log("main:render")
    console.log(this.props.chats);


    var theThreadIWantToPass = ;
    for(var i = 0; i < this.state.chats.length; i++)
    
        console.log("chat: " + this.state.chats[i].chatID);
        if (this.state.chats[i].chatID === this.state.chatID) 
            theThreadIWantToPass = this.state.chats[i];
            break;
        
    

    return (
        <div className="chatapp">
            <div className="thread-section">
                <div className="thread-count">

                </div>
                <LeftUserList
                    chats=this.state.chats
                    clickFunc=this.handleClickOnLeftUser // ***important
                />
            </div>
            <div>
                <RightMessageBox chat=theThreadIWantToPass />
            </div>
        </div>
    );

);

【问题讨论】：

Laycat，同一天进来的一个答案，要求您提供反馈。你现在要补充吗？迟到总比没有好！

【参考方案1】：

在您的情况下，您需要使用方法componentDidMount，就像这样

var MainChat = React.createClass(

  getInitialData: function() 
    var url = 'http://127.0.0.1:8888/test/sampledata.php?user=123';

    $.get(url, function(data, status) 
        this.setState( chats: data );        
    .bind(this))
  ,

  componentDidMount: function () 
    this.getInitialData();
  ,

  getInitialState: function() 
    return 
      chatId: '',
      chats: []
    ;
  ,

  handleClickOnLeftUser: function(data)
    this.setState( chatID: data.chatID );
  ,

  render: function() 
    var theThreadIWantToPass = ;

    for(var i = 0; i < this.state.chats.length; i++) 
      if (this.state.chats[i].chatID === this.state.chatID) 
        theThreadIWantToPass = this.state.chats[i];
        break;
      
    

    return (
      <div className="chatapp">
        <div className="thread-section">
          <div className="thread-count"></div>
          <LeftUserList
              chats=this.state.chats
              clickFunc=this.handleClickOnLeftUser />
        </div>

        <div>
          <RightMessageBox chat=theThreadIWantToPass />
        </div>
      </div>
    );
  
);

注意 - 使用 "async": false 这是不好的做法

【参考方案2】：

暂时找到了一个骇人听闻的修复方法（至少在有人回答之前）。我目前的解决方案是通过设置

来防止 jQuery 使用回调

     $.ajaxSetup( "async": false)

在我调用 Jquery 的 get() 函数之前。

getInitialData: function()
    var c = []
    $.ajaxSetup( "async": false)
    $.get("http://127.0.0.1:8888/test/sampledata.php?user=123", function(data, status) 
        console.log("Data: "+ data+ "\nStatus: " + status);
        c = data    
    )
    return c
,
getInitialState: function() 
    return 
        chatId : "",
        chats : this.getInitialData(),
        //chats: this.props.chats
    ;
,