等到AJAX调用呈现

Question

比方说，我有下面的代码之前完成？

谢谢！

编辑：固定代码。

Answer 1

你可以有一个布尔值来切换你的内容的显示并在AJAX响应中翻转它。

您可以将此布尔值应用于CSS属性或整个DIV内容。

下面是可以工作的解决方案。它不会阻止Render被调用，它只会隐藏视图中的数据相关元素，直到收到呼叫响应。

componentDidMount() { 
    $.ajax({ 
     type: 'GET', 
     url: '/data/', 
     dataType: 'text', 
     success: function(response) { 
      this.setState({show: true, data: response}) 
     }.bind(this) 
    }); 
} 

render() { 
    let {data, show} = this.state; 

    let containerStyle = { 
     display: show ? 'block' : 'none' 
    }; 

    return (
      <div style={containerStyle}> 
       WOW 
       {this.state.pools} 
       <FilterTable rows = {this.state.data} /> 
      </div> 
     ); 
} 

Answer 2

如果你不想要这个组件渲染，直到Ajax调用完成后，你应该质疑为什么你在所有加载该组件之前Ajax调用完成。 如果您希望Component呈现this.state.pools而不管您是否拥有this.state.data，我会建议您的render方法有条件地呈现FilterTable。

render() { 
     let filterTable; 
     if (this.state.data && this.state.data.length > 0) { // assuming an array 
     filterTable = (
      <FilterTable rows = {this.state.data} /> 
     ); 
     } 
     return (
     WOW 
     {this.state.pools} 
     {filterTable} 
    ); 
} 

但是，如果你想，当你有this.state.data倒不如有这个组件的父执行Ajax调用，只有当必要信息可创建此组件只呈现。一般来说，如果您立即更改componentDidMount中的组件数据，则只需将该信息作为道具传递即可。

Answer 3

我假设您只想在接收数据时渲染组件。下面的代码片段呈现了ajax调用成功的组件。 React具有允许我们动态地在DOM中装入组件的函数。 您将需要导入反应。

import ReactDOM from 'react-dom'; 

componentDidMount() { 
    $.ajax({ 
    type: 'GET', 
    url: '/data/', 
    dataType: 'text', 
    success: function(response) { 
     this.setState({data: response}) 
     ReactDOM.render(<FilterTable rows = {response} />,document.getElementById('filterTableContainer')); 
    }.bind(this) 
}); 
}  
render() { 
let {rows} = this.state.data 
return (
     <div> 
      WOW 
      {this.state.data} 
      <div id="filterTableContainer"></div> 
     </div> 
    ); 
} 

Answer 4

我宁愿选择一个非常简单的方法。我将有一个以show set value的名字命名为false的状态。并且在回调中成功的ajax返回后，将'show'的值设置为true。并在渲染中根据'show'的值在返回中安装jsx代码。

componentDidMount() { 
    $.ajax({ 
     type: 'GET', 
     url: '/data/', 
     dataType: 'text', 
     success: function(response) { 
      this.setState({data: response, show: true}); 
     }.bind(this) 
    }); 
} 

render() { 
    let {rows} = this.state.data 
    return (
      <div> 
       WOW 
       {this.state.show === true : <div> 
        {this.state.data} 
        <FilterTable rows = {this.state.data} /> 
       </div>: null 
       } 

      </div> 
     ); 
}