Javascript 在呈现React组件之前，请等待AJAX调用完成

假设我有以下代码：

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

render() {
    let {rows} = this.state.data
    return (
            <div>
                WOW
                {this.state.data}
                <FilterTable rows = {this.state.data} />
            </div>
        );
}

componentDidMount（）{
$.ajax({
键入：“GET”，
url:“/data/”，
数据类型：“文本”，
成功：功能（响应）{
this.setState（{data:response}）
}.绑定（此）
});
}
render（）{
设{rows}=this.state.data
返回(
哇！
{this.state.data}
);
}

如何使

render（）

部分在ajax调用完成之前不执行

谢谢

---

编辑：修复代码。

您可以使用一个布尔值来切换内容的显示，并在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>
        );
}

componentDidMount（）{
$.ajax({
键入：“GET”，
url:“/data/”，
数据类型：“文本”，
成功：功能（响应）{
this.setState（{show:true，data:response}）
}.绑定（此）
});
}
render（）{
让{data，show}=this.state；
让集装箱式={
显示：显示？'block'：'none'
};
返回(
哇！
{this.state.pools}
);
}

如果您不希望在Ajax调用完成之前呈现此组件，您应该询问为什么要在Ajax调用完成之前加载此组件。 如果希望组件呈现this.state.pools，而不管您是否拥有this.state.data，我建议您的呈现方法simple有条件地呈现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}
      );
} 

render（）{
让过滤器成为可过滤的；
如果（this.state.data&&this.state.data.length>0）{//假定为数组
filterTable=(
);
}
返回(
哇！
{this.state.pools}
{filterTable}
);
} 

---

但是，如果希望仅在拥有this.state.data时渲染，则最好让此组件的父级执行Ajax调用，并仅在必要信息可用时创建此组件。通常，如果要立即在componentDidMount中更改组件数据，只需将该信息作为道具传入即可

我假设您只希望在收到数据时渲染组件。下面的代码片段在ajax调用成功时呈现该组件。React具有允许我们在DOM中动态装载组件的函数。 您将需要导入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>
    );
}

从“react dom”导入ReactDOM；
componentDidMount（）{
$.ajax({
键入：“GET”，
url:“/data/”，
数据类型：“文本”，
成功：功能（响应）{
this.setState（{data:response}）
render（，document.getElementById（'filterTableContainer'）；
}.绑定（此）
});
}    
render（）{
设{rows}=this.state.data
返回(
哇！
{this.state.data}
);
}

我宁愿选择一种非常简单的方法。我将有一个名为“show”的状态，最初将值设置为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>
        );
}

componentDidMount（）{
$.ajax({
键入：“GET”，
url:“/data/”，
数据类型：“文本”，
成功：功能（响应）{
this.setState（{data:response，show:true}）；
}.绑定（此）
});
}
render（）{
设{rows}=this.state.data
返回(
哇！
{this.state.show==true:
{this.state.data}
：null
}
);
}

您应该将render（）函数移到success中function@KmasterYC这不是React的工作方式抱歉，

this.props.data

和

this.props.pool

应该是同一个变量。那么我绝对建议您在拥有所有数据的情况下只创建此组件的实例。我该怎么做？抱歉，我是React的初学者。一种可能是在名为onload的函数中运行ajax代码，然后在成功后通过呈现顶级组件启动React应用程序。但是，如果您是新手，我建议您阅读他们的教程，并首先尝试使用静态数据的示例。除非ajax调用依赖于用户输入，否则React代码不需要知道数据来自何处。这正是我所需要的！谢谢