如何等待呈现react.js中的视图直到$ .get（）完成？

Question

你好我正在编写一个chatjs聊天客户端，并且想要使用从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> 
    ); 
} 
}); 

Answer 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这是不好的做法

Answer 2

发现了一个暂时的问题（至少在某人回答之前）。我目前的解决方案是通过设置

 $.ajaxSetup({ "async": false}) 

来防止jQuery使用回调，然后再调用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 
    }; 
},